React style

react에서 style을 주는 방법

inline styling

html 태그안에 직접 입력

<div style={{color:"#fff", fontSize:"30px" }} >

font-size 대신 커멀케이스 방식 fontSize 사용

JS object

객체 형식으로 컴포넌트 내에 변수를 선언
해당 태그에 style={변수명}

const textStyle={
	fontSize: "36px",
	color: "pink"
}
<div style={textStyle}>

font-size 대신 커멀케이스 방식 fontSize 사용

CSS 파일 작성

css를 작성한 뒤 css를 import

import './Style.css'

styled-components

컴포넌트 자체에 스타일을 주는 방법

import styled, { css } from 'styled-components';

const 변수명= styled.스타일을 줄 요소 명`
  width: 50px;
  스타일: 스타일값;

  ${props=>{
  return props.조건 &&
  css`
    height: 1.75em;
    스타일: 스타일값;
  `
  }}
`;


function App() {
  return (
    <변수명/>
  );
}

위에서 말한 스타일을 줄 요소 명이란 div button 같은 tag명을 의미한다.

---

응용

||

${props => props.color || 'black'}

&&

props.color가 있으면 props.color를, 그렇지 않다면 'black'을 반환한다.

 ${props=> props.big && 
  css`
    width: 150px;
  `
  }

props.big이 있으면 width를 150px로 지정한다.