Styled-Components

App.js

import styled, { css } from "styled-components";
// styled-components => css를 자바스크립트에서 사용할 수 있게 해주는 패키지
// 함수가 아니라 요소 그 자체처럼 써야됨 => 태그 열고 닫고

const Container = styled.div`
    display: flex;
`;

const Button = styled.button`
    background-color: beige;
    border-radius: 3px;
    margin: 1rem;
    ${(props) =>
        props.primary &&
        css`
            background-color: aliceblue;
        `}
`;

function App() {
    return (
        <>
            <Container>
                <Button>NormalButton</Button>
                <Button primary>PrimaryButton</Button>
            </Container>
        </>
    );
}

export default App;

View