[React] Styled Components

const Box = styled.div`

    backgroundColor: "red",

    width: 200,

    height: 200,

`; ❌

const Box = styled.div`

    background-color: red;

    width: 200;

    height: 200;

`; ⭕️ 

 

const Text = styled.span`
	color: tomato;
`;

<span style={{ color: tomato }}></span> ⭕️

<span style="color: tomato;"></span> ❌

 

Adapting and Extending

background-color: ${props => props.bgColor};

const B = styled(A)``;

import styled from "styled-components"

const Box = styled.div`
    background-color: ${props => props.bgColor}; // Adapting
    width: 100px;
    height: 100px;
`

// Extending
const Circle = styled(Box)`
    border-radius: 50%;
`

function App() {
    return (<>
    	<Box bgColor="teal" />
        <Box bgColor="tomato" />
        <Circle bgColor="lemon" />
    </>)
}	

export default App

 

 

as

It changes the component's resulting HTML tag.

const Btn = styled.button``

function App() {
    return (<>
    	<Btn>Log in</Btn>
        <Btn as="a" href="/">Log in</Btn>
    </>)
}

<button>Log in</button>
<a href="/">Log in</a>

 

 

attrs

const input = styled.input.attrs({ required: true, minLength: 10 })``

function App() {
    return (<>
    	<Input />
        <Input />
        <Input />
        <Input />
    </>)
}

<input required minlength="10">
<input required minlength="10">
<input required minlength="10">
<input required minlength="10">