CSS 적용하기

styled-components

npm i styled-components

styled-components는 style이 적용된 Component를 생성

component 스타일링

Component의 props를 전달받아 조건부로 사용 가능

📄 App.jsx

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  width: 50px;
  padding: 1rem;
  background-color: ${props => props.delete ? "red" : "blue"}
  &:active {	// 의사 클래스(가상 클래스) css 적용
    box-shadow: 1px 1px 1px;
  }
`

const App = () => {
  return (
    <Button>Create</Button>
    <Button delete>Delete</Button>
  );
}

export default App;

확장 스타일링 (feat. antd)

기존 Component에 스타일을 추가

📄 App.jsx

import React from 'react';
import { Input } from 'antd';
import 'antd/dist/antd.css';

const MyInput = styled(Input)`
  margin: 16px;
  &:disabled {
    ${(props) => (props.valid === 'invalid' ? 'background: #ccc' : null)}
`;

const App = () => {
  return (
    <MyInput 
      type="email"
      id="email"
      name="email"
      value={email}
      onChange={onChangeEmail}
      placeholder="이메일 입력"
      required
      valid="invalid" 
    />
  )
}

(+) 부분적으로 Component에 스타일 적용

css 파일을 생성하여 선언한 뒤 className으로 적용

📄 App.css
.mb-4 {
  margin-bottom: 4px;
}


📄 App.jsx
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  width: 50px;
  padding: 1rem;
  background-color: ${props => props.delete ? "red" : "blue"}
`

const App = () => {
  return (
    <Button className="mb-4">Create</Button>
    <Button delete="delete">Delete</Button>
  );
}

export default App;

📗 Reference

03. styled-components
[React] Styled Components 사용기