styled-component 使用

总结：

1. 内部可以使用css的基本父子选择器。
2. 可以通过按钮的 props传递属性，并且通过箭头函数返回相应的css代码
3. 可以通过写出基础default样式，然后进行继承复用。

代码欣赏

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

const $blueColor = "#3880ff;";
const $greenColor = "#45ba6d";

interface ButtonProps {
    free?: boolean;
    middle?: boolean;
    styles?: React.CSSProperties;
    loading?: boolean;
}

export const DefaultButton = styled.button`
    height: 32px;
    line-height: 32px;
    min-width: 90px;
    width: fit-content;
    text-align: center;
    font-size: 14px;
    background: none;
    border-radius: 4px !important;
    border-width: 1px;
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
    cursor: pointer;
    border-style: solid;

    ${(props: ButtonProps) => {
        if (props.free) {
            return css`
                min-width: auto;
                width: fit-content;
                padding: 0 12px;
            `;
        } else if (props.middle) {
            return css`
                min-width: 110px;
            `;
        }
    }}
    ${(props: ButtonProps) => props.styles || ""}
    ${(props: ButtonProps) =>
        props.loading &&
        css`
            pointer-events: none;
            position: relative;
            &:before {
                display: block;
                position: absolute;
                top: -1px;
                right: -1px;
                bottom: -1px;
                left: -1px;
                z-index: 1;
                display: none;
                background: #fff;
                border-radius: inherit;
                opacity: 0.35;
                -webkit-transition: opacity 0.2s;
                transition: opacity 0.2s;
                content: "";
                pointer-events: none;
            }
        `}
    &:focus {
        outline: none;
    }
    &[disabled] {
        color: #fff !important;
        background: #ccc !important;
        border-color: #ccc !important;
        cursor: not-allowed;

        &:hover {
            color: rgba(0, 0, 0, 0.25);
            background-color: #989898;
            border-color: #989898;
        }
    }
`;
export const GreenButton = styled(DefaultButton)`
    color: #fff;
    background: ${$greenColor};
    border-color: ${$greenColor};

    &:hover,
    &:focus {
        color: #fff;
        background: #3ea762;
    }
`;

export const GreenBlankButton = styled(DefaultButton)`
    color: ${$greenColor};
    border-color: ${$greenColor};

    &:hover,
    &:focus {
        color: ${$greenColor} !important;
        border-color: ${$greenColor} !important;
        background: #c9f7d9 !important;
    }
`;
export const BuleButton = styled(DefaultButton)`
    color: #fff;
    background: ${$blueColor};
    border-color: ${$blueColor};

    &:hover,
    &:focus {
        color: #fff;
        background: ${$blueColor + 5};
    }
`;

export const BlueBlankButton = styled(DefaultButton)`
    color: ${$blueColor};
    border-color: ${$blueColor};

    &:hover,
    &:focus {
        color: ${$blueColor} !important;
        border-color: ${$blueColor} !important;
        background: lighten($color: ${$blueColor}, $amount: 45) !important;
    }
`;

export const DefaultBlankButton = styled(DefaultButton)`
    color: #999;
    border-color: #999;
    box-shadow: none;

    &:hover,
    &:focus {
        color: ${$blueColor} !important;
        border-color: ${$blueColor} !important;
        background: lighten($color: ${$blueColor}, $amount: 45) !important;
    }
`;

export const GrayButton = styled(DefaultButton)`
    background: #999;
    border-color: #999;
    color: #fff;

    &:hover,
    &:focus {
        background: #8d8d8d;
    }
`;