Using styled component

Time:2021-4-17

Conclusion:

  1. The basic parent-child selector of CSS can be used internally.
  2. The properties can be passed through the props of the button, and the corresponding CSS code can be returned through the arrow function
  3. You can write out the basic default style, and then inherit and reuse it.

Code appreciation

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;
    }
`;