All files / src/chap05 StyledComp2.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import styled from 'styled-components';
 
// <button> 요소를 생성하는 MyButton 컴포넌트
export function MyButton({ className, children }) {
  return (
    <button type="button" className={className}>
      {children}
    </button>
  );
}
 
// MyButton에 스타일을 부여한 MyStyledButton을 정의한다.
export const MyStyledButton = styled(MyButton)`
  display: block;
  background-color: royalblue;
  color: white;
  font-weight: bold;
  width: 80px;
  height: 50px;
`;