使用 switch 语句更新样式组件的属性答案

【问题标题】：update properties of style component using switch statement使用 switch 语句更新样式组件的属性
【发布时间】：2022-06-17 06:09:38
【问题描述】：

我知道有一个类似的问题，但我需要的是不同的。

我已经声明了我的按钮将使用的常用样式，并且我正在使用一个带有 switch 语句的函数，该函数对于我将在其他页面中使用的不同按钮具有不同的属性，并且在一种情况下我需要边框-半径和填充不同于普通的，如何在不使用 !important 或 && { 的情况下更新（或替换）值。

这是代码

import { TTheme } from 'src/styles/Themes/Theme';
import styled, { css, FlattenSimpleInterpolation } from 'styled-components';

const getVariantCSS = <T extends TTheme>(props: T): FlattenSimpleInterpolation => {
    const { theme } = props;

    switch (props.variant) {

        case 'secondary':
            return css`
                background-color: ${theme.colors.white};
                color: ${theme.colors.primary};
                border: ${theme.borders.solid1} ${theme.colors.primary};
                &:hover {
                    color: ${theme.colors.white};
                    background-color: ${theme.colors.shades.hoverLight};
                    border: ${theme.borders.none};
                    box-shadow: ${theme.boxShadows.primary};
                }
            `;

        case 'half':
            return css`
                color: ${theme.colors.white};
                background-color: ${theme.colors.primary};
                && {
                    border-radius: ${theme.radius.half};
                    padding: ${theme.paddings.small};
                }
                border: ${theme.borders.solid2} ${theme.colors.white};
            `;

        case 'dark':
            return css`
                background-color: ${theme.colors.tertiary};
                color: ${theme.colors.primary};
                border: ${theme.borders.solid1} ${theme.colors.primary};
                &:hover {
                    color: ${theme.colors.white};
                    background-color: ${theme.colors.shades.hoverDark};
                    box-shadow: ${theme.boxShadows.primary};
                    filter: ${theme.filter.brightness};
                    border: ${theme.borders.none};
                    opacity: ${theme.opacity.default};
                }
            `;

        default:
            return css`
                background-color: ${theme.colors.primary};
                color: ${theme.colors.white};
                border: ${theme.borders.none};
                box-shadow: ${theme.boxShadows.primary};
                &:hover {
                    color: ${theme.colors.white};
                    background-color: ${theme.colors.shades.hoverLight};
                }
            `;
    }
};

export const StyledButton = styled.button`
    ${getVariantCSS}
    width: 100%;
    height: 100%;
    padding: ${(props) => props.theme.paddings.medium};
    display: ${(props) => props.theme.content.display.flex};
    flex-direction: ${(props) => props.theme.content.flexDirection.row};
    justify-content: ${(props) => props.theme.content.justifyContent.center};
    align-items: ${(props) => props.theme.content.alignItems.center};
    flex-grow: ${(props) => props.theme.content.flexGrow.one};
    border-radius: ${(props) => props.theme.radius.button};

【问题讨论】：

标签： css reactjs typescript next.js styled-components

【解决方案1】：

我建议使用级联。只需将“getVariantsCSS”放在主要样式下方，然后将应用所需的样式，然后不需要“重要”和“&&”。

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#the_cascade

export const StyledButton = styled.button`
    width: 100%;
    height: 100%;
    padding: ${(props) => props.theme.paddings.medium};
    display: ${(props) => props.theme.content.display.flex};
    flex-direction: ${(props) => props.theme.content.flexDirection.row};
    justify-content: ${(props) => props.theme.content.justifyContent.center};
    align-items: ${(props) => props.theme.content.alignItems.center};
    flex-grow: ${(props) => props.theme.content.flexGrow.one};
    border-radius: ${(props) => props.theme.radius.button};
    ${getVariantCSS}
`

【讨论】：