React Component Styling

1. SASS

• .scss: 위계질서 나타낼 때 중괄호 중첩 형태
• $ npm i sass

---

2. CSS module

• 파일이름.module.css
• $ npm i classnames
import classNames from ‘classnames’;
classNames(styles[“button”], styles[“loading”])
• import classNames from “classnames/bind”;
const cx = classNames.bind(styles);
cx(“button”, “loading”);
  -> 매개변수 중 falsy인 값 제외하고 문자열로 띄어쓰기로 구분해 합쳐줌
• 클래스 이름이 자동으로 고유해져 아무 단어나 사용 가능

---

3. Styled Components

• $ npm I styled-components (별도의 라이브러리 사용)

// StyledButton.jsx
import styled from ‘styled-components’;

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
`;
export default StyledButton;

//  App.js
import StyledButton from ‘./components/StyledButton’;

<StyledButton>버튼</StyledButton>

1) props 사용하는 경우

// StyledButton.jsx
import styled from ‘styled-components’;
const StyledButton = styled.button`
 background: transparent;
 border-radius: 3px;
 border: 2px solid palevioletred;
margin: 0 1em;
padding: 0.25em 1em;
font-size: 20px;

${props => props.primary && 
css`
  background: plaevioletred;
  color: white;
`}
`;
export default StyledButton;
//  App.js
import StyledButton from ‘./components/StyledButton’;
<StyledButton>버튼</StyledButton>

2) 만든 버튼 재사용하는 경우

const PrimaryStyledButton = styled(StyledButton)`
  background: palevioletred;
  color: white;
`;

3) 다른 태그 형태로 사용하는 경우

• 단순 변형

<StyledButton as="a" href="/">버튼</StyledButton>

• props 받기

const UppercaseButton = (props) => (
  <button {…props} children={props.children.toUppercase() />
 );

<StyledButton as={UppercaseButton}>버튼</StyledButton>

• 스타일 병합

const MyButton = (props) => (
  <button 
    className={props.className} 
    children={`MyButton ${props..children}`} 
  />
);

const StyledMyButton = styled(MyButton)`
  background: transparent;
  border-radius: 3px;
  border: 2px solid ${(props) => props.color || “palevioletred”};
  color: ${(props) => props.color || “palevioletred”};
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;

  :hover{
    border: 2px solid red;
  }
  ::before {
    content: “@”;
  }
`;

<StypedMyButton>버튼</StyledMyButton>

4) 전역설정 적용하는 경우

import styled, {createGlobalStyle} from “styled-components”;

const GlobalStyle = createGlobalStyle`
  button{
    color: yellow;
  }
`; 

• App.js의 return내 <GlobalStyle /> 삽입 필요 -> 하위 모든 component에 적용됨

5) 속성 포함하여 만드는 경우

const StyledA = styled.a.attrs(props => ({
  target: “_BLANK”, // default 속성으로 지정
}))`
  color: ${(props) => props.color};
`;

---

4. React Shadow

• HTML 안의 본래 HTML에 영향을 주지 않는 HTML
• css module, styled component, shadow DOM은 모두 스타일 오염 막고자 등장한 것
• $ npm i react-shadow
• import root from “react-shadow”;
const styles = ``;
• App.js의 return 전체를 <root.div> </root.div>로 감싸면 외부 스타일 영향 받지 않게됨 -> 스타일은 위의 styles에 작성하고 </root.div>전에 <style type=”text/css”>{styles}</style> 작성
• 외부와 완전히 단절 -> 장단점 존재

---

5. Ant Design

• $ npm i antd
• import “antd/dist/antd.css”; // index.js의 전역 스타일
  import { DatePicker } from ‘antd’; // App.js의 리액트 컴포넌트
• Ant Design 사이트에서 components 목록 확인해 필요한 것 가져오기
• import DatePicker from ‘antd/es/date-picker’;
import ‘antd/es/date-picker/style/css’;
  (필요한 파일만 선택적으로 가져올 수도 있음)
• 아이콘 사용
  $ npm i --save @ant-design/icons
import {GithubOutlined} from “@ant-design/icons”;
<GithubOutlined />