React 에서 css 적용하기 (6가지)

 

github.com/Khan/aphrodite

0. 상위 컴포넌트에 className을 넣으면 하위 컴포넌트에서 props로 받아올 수 있다.

return(

    <div className="app">

        <컴포넌트명 className="name"/>

    </div>

)

const 컴포넌트명 = ( { className } ) => {

   <>

      <div className={ className } />

   </>

}

1. inline styling

class MyJob extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      </div>
    );
  }
}

2. JavaScript Object

class MyJob extends React.Component {
  render() {
    const hstyle = {
      color: "black",
      backgroundColor: "blue",
      fontFamily: "Arial"
    }
    return (
      <div>
      <h1 style={ hstyle }>Hello Style!</h1>
      </div>
    );
  }
}

3. importing css file

import React from 'react';

import ReactDOM from 'react-dom';

import './App.css';

 

class MyJob extends React.Component {

  render() {

    return (

      <div>

      <h1>Hello Style!</h1>

      </div>

    );

  }

}

4. CSS modules : 특정 컴포넌트에만 css를 적용 ★★

 

import React from 'react';

import styles from './css.module.css'

 

const ExampleCssModule = () => {

  return (

    <div className={styles.wrapper}>

      <h1 className={styles.title}>Example Css Module.</h1>

      <button className={styles.button}>Button</button>

    </div>

  );

};

5. Styled Components ★★    

styled-components.com/docs

import React from 'react';

import styled from 'styled-components';

 

1. 설치: npm install --save styled-components

2. 문법: statement: 변수 = styled + element(HTML tags) ` ~ `

3. 컴포넌트에 적용

 

const Wrapper = styled.div`

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

  padding: 50px;

  color: #444;

  border: 1px solid #1890ff;

`;

const Title = styled.h1`

  color: #0d1a26;

  font-weight: 400;

`;

const Button = styled.button`

  padding: 10px 20px;

  border: none;

  border-radius: 4px;

  background-color: #1890ff;

  color: #fff;

  font-size: 14px;

  cursor: pointer;

  transition: .3s background;

  &:hover {

    background: #40a9ff;

  }

`;

 

const ExampleStyledComponents = () => (

  <Wrapper>

    <Title>Example Styled-Components</Title>

    <Button>Button</Button>

  </Wrapper>

);

 

[ Library ]

6. Aphrodite

7. Radium

8. JSS

9. Emotion

10. CDN

 

medium.com/@dmitrynozhenko/9-ways-to-implement-css-in-react-js-ccea4d543aa3