[React] styled-components

import React from "react";
import styled from "styled-components";

const Button = styled.button`
    color: ${props => props.dark ? "white" : "dark"};
    background : ${props => props.dark ? "black" : "white"};
    border: 1px solid black;
`;

function Sample(props) {
    return (
        <div>
            <Button>Normal</Button>
            <Button dark>Dark</Button>
        </div>
    )
}

export default Sample;

이렇게 나온다.

color: ${props => props.dark ? "white" : "dark"};
background : ${props => props.dark ? "black" : "white"};

이 부분이 중요하다.

 

더 재롱을 부려보면

import React from "react";
import styled from "styled-components";

const Button = styled.button`
    color: grey
    border: 2px solid palevioletred;
`;

const RoundedButton = styled(Button)`
    border-radius: 16px;
`;

function Sample(props) {
    return (
        <div>
            <Button>Normal</Button>
            <RoundedButton>Rounded</RoundedButton>
        </div>
    )
}

export default Sample;

이렇게 나온다.

const RoundedButton = styled(Button)`
    border-radius: 16px;
`;

이 부분이 중요하다.