리액트 Styled Componets - 2편

• Tag의 속성을 변경하는 방법

const InputCheckbox = styled.input.attrs({
	type: 'checkbox',
  	checked: true,
})`
	border-radius: 5px;
	color: red;
`;

attrs 를 이용해서 태그의 속성을 변경할 수 있다.

---

• mixin(스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의하는 기능)

const awesomeCard = css`
	box-shadow: 0 4px 6px blue, 0 1px 3px blue;
	background-color: white;
	border-radius: 10px;
	padding: 20px;
`;

const InputCheckbox = styled.input.attrs({
	type: 'checkbox',
  	checked: true,
})`
	border-radius: 5px;
	color: red;
	${awesomeCard} // <== 추가
`;

styled-components 의 css 메소드를 이용해 style을 정의하고 변수로 추가해 주었다.

---

• ThemeProvider 를 이용해서 React Child component까지 제공된 테마를 적용하는 방법.

  	 먼저 theme.js 를 생성

  const theme = {
    mainColor: 'red',
    dangerColor: 'blue',
    successColor: 'gray',
  }
  
  export default theme;

  	App.js 에서 ThemeProvider와 theme를 import 한뒤, 컴포넌트 최상단에  ThemeProvider 컴포넌트에 theme를 props로 넣어준다.

import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';
import themes from './themes';

const Card = styled.div`
	background-color: white;
`;

const Button = styled.button`
  border-radius: 30px;
  padding: 25px 15px;
  background-color: ${props => props.theme.dangerColor} // <== props.theme의 값을 설정할 수 있음
`;

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={themes}>	// <== props
        <React.Fragment>
          <GlobalStyle />
          <Container>
            <Form />
          </Container>
        </React.Fragment>
      </ThemeProvider>
    );
  }
}

const Form = () => (
  <Card>
    <Button>Hello</Button>
  </Card>
)