Styled-component attrs

Style-component로 input 태그의 속성을 변경할 수 있다.

<input class="text_input" type="text" placeholder="html also good!" required /><!-- in CSS -->
.text_input { color: red };

" use strict ";

const TextInput = styled.input.attrs({
  type: "text",
  required: true,
  placeholder: "스타일 컴포넌트 꿀템!"
})`
  color: red;
`;

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

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

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} // <== 추가
`;

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

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

export default theme;

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>
)