总结：

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