React (Style)

Styled-components란?

javascript코드로 css코드를 작성하는 것으로 components 를 꾸미는 방식

최근에 인기가 많은tailwindcss, styled-components중에 사용하면된다.

• vsCode에서 vscode-styled-components 플러그인 설치

const StBox = styled.div`
  width: 100px;
`;

해당 코드처럼 맨앞을 대문자로 해야 적용이 잘된다. 30분 혼란을 주었다.

<StBox borderColor="red" backgroundColor="yellow">
        레드
      </StBox>

const StBox = styled.div`
  border: 1px solid ${(props) => props.borderColor};
  background-color: ${(props) => {
    return props.backgroundColor;
  }};
`;

props를통해서 styled-component를 사용하는 코드이다(조건부 스타일링)

 {boxList.map((box) => {
        return <StBox borderColor={box}>{getBoxName(box)}</StBox>;
      })}
              
//박스의 색
const boxList = ["red", "blue", "green", "black"];
//색을 넣으면, 이름을 반환
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란박스";
    default:
      return "검정 박스";
  }
};

styled-components를 통해서 배열,switch를 사용해서 코드를 만드는방법

GlobalStyles(전역 스타일링)

전역 스타일링이란, 프로젝트를 아우르는 스타일