آشنایی با styled-components

فرض کنید همه‌ی style های موردنیاز برای یک کامپوننت داخل خود آن تعریف شده باشد، به‌به!

import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';

const Button = styled.button`
    background-color: #00BFFF;
    border: 1px solid transparent;
    color: #FFF;
    font-size: 16px;
    padding: 10px 15px;
`;

ReactDOM.render(
    <Button>Submit</Button>,
    document.getElementById('root')
);

توجه کنید که style باید داخل Template literals تعریف شود ` `

دیگر نیازی نیست نگران className ها باشید، البته این بدین معنا نیست که نمی‌توانید از className استفاده کنید:

<Button className="submit-button">
    Submit
</Button>

مهم‌تر اینکه شما این style ها را با جاوااسکریپت می‌نویسید:

import styled from 'styled-components'; 

const backgroundColor = '#00BFFF';

const Button = styled.button`
    background-color: ${backgroundColor};
    border: 1px solid transparent;
    color: #FFF;
    font-size: 16px;
    padding: 10px 15px;
`;

وقتی حرف از کامپوننت می‌شود نام prop به میان می‌آید. در مثال بالا، backgroundColor می‌تواند یک function باشد که prop های کامپوننت Button را به عنوان پارامتر ورودی دریافت می‌کند:

import PropTypes from 'prop-types';
import styled from 'styled-components';

function backgroundColor(props) {
    if (props.primary) {
        return '#00BFFF';
    } else {
        return '#353535';
    }
}

const Button = styled.button`
    background-color: ${backgroundColor};
    border: 1px solid transparent;
    color: #FFF;
    font-size: 16px;
    padding: 10px 15px;
`;

Button.propTypes = {
    primary: PropTypes.bool
};

ReactDOM.render(
    <div>
        <Button primary>Submit</Button>
        <Button>Cancel</Button>
    </div>,
    document.getElementById('root')
);

برای کامپوننت‌های تودرتو می‌توانید style های خود را مثل SCSS بنویسید:

const Button = styled.button`...`;

const Wrapper = styled.div`
    margin: auto 20px;
    max-width: 600px;

    ${Button} {
        display: inline-block;
        width: 100%;
    }
`;

ReactDOM.render(
    <Wrapper>
        <Button>
            Create my Account
        </Button>
    </Wrapper>,
    document.getElementById('root')
);

هم‌چنین می‌توانید styled-components را extend کنید:

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

const DefaultButton = styled.button`
    background-color: #353535;
    border: 1px solid transparent;
    color: #FFF;
    font-size: 16px;
    padding: 10px 15px;
`;

const PrimaryButton = DefaultButton.extend`
    background-color: #00BFFF;
`;

بسیاری از ویژگی‌های styled-components ناگفته باقی ماند ولی در نوشته‌های بعدی درباره آنها صحبت خواهیم کرد.