import "./App.css";
import styled from "styled-components";
const StContainer = styled.div display: flex;;
const StBox = styled.div width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; margin: 20px;;
//박스의 색
const boxList = ["red", "blue", "green", "pink"];
//색을 넣으면, 이름을 반환
const getBoxName = (color) => {
switch (color) {
case "red":
return "빨간 박스";
case "green":
return "초록 박스";
case "blue":
return "파란 박스";
default:
return "검정 박스";
}
};
function App() {
return (
{/ 빨간 박스 /}
{boxList.map((box) => {
return {getBoxName(box)};
})}
);
}
export default App;
==================================================
CSS - in _ JS
자바스크립트로 코드를 작성
props를 통해 부모컴포넌트에서 자식에게 조건부 스타일을 넣을수 있음.
스타일드 컴포넌트 사용하려면
터미널에
yarn add styled-component 입력- > package.json에 설치됨
