[React] styled-components

styled-components 모듈 설치

yarn add styled-components

App.js

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

const Box = styled.div`
    padding: 10px;
    color: white;
    background: ${props => props.color || 'blue'}
    
    &:hover {
         background: rgba(255, 255, 255, 0.9);
    }
    
    ${props => props.isImportant && css`
        border: 1px solid red;
    `}
`;

const App = () => {
    return (
        <div>
            <Box>Hello World</Box>
            <Box color="grey">Hello World</Box>
            <Box isImportant={true}>Hello World</Box>
        </div>
    );
};

export default App;

참고

• https://velog.io/@velopert/react-component-styling