[react.js]一気に造形に慣れる::styled-componses

npm install --save styled-components

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

const BoxParent = styled.div`
    padding: 50px;
`;

const Box = styled(BoxParent)`
    background-color: ${(props) => props.bgColor};
    color: red;

    // &는 this와 같은 의미
    & > div {
        color: blue;
        ${(props) => props.bgColor === 'grey' && css`
            color: yellow;
        `}
    }
`;

function App() {
    return (
        <>
            <Box bgColor="yellow">
                Hello World
                <div>Hello World</div>
            </Box>
            <Box bgColor="grey">
                Hello World
                <div>Hello World</div>
            </Box>
        </>
    );
}

export default App;