React - 添加新类时覆盖所有以前的冲突样式

问题描述

我已经看到很多关于这个主题的话题，但似乎没有什么能像我想要的那样对我有用。我有一个 React 组件，它将 className 作为道具。我还有一个 HOC，它接受一个组件和默认样式，并返回一个接受新样式的组件，如下所示：

function withCombinedStyles(WrappedComponent,defaultClassName) {
    return ({className: newClassName,...rest}) => {
        const className = combineClassNames(newClassName,defaultClassName);

        return <WrappedComponent className={className} {...rest} />;
    };
};

目前， combineClassNames 只是连接字符串。我想让 newClassName 始终覆盖与 defaultClassName 冲突的样式，但保留旧样式。目前，其中一种样式似乎覆盖了另一种样式，但没有明显的顺序 - 我如何放置 defaultClassName 和 newClassName 并不重要。我怎样才能做到这一点？目前，我使用 CSS 模块，但该项目仍然小到足以让我能够用另一种技术重写样式，如果这能达到预期的结果，而 CSS 模块不能做到这一点（尽管我更喜欢使用 CSS 模块和 React - 与他们的特定解决方案将起作用）。

我会使用 !important 但这意味着我永远不能添加第三个 className 并且将来扩展样式可能具有挑战性。

解决方法

如果你在 JS 中做 CSS，那么顺序会很重要，但因为你只是组合 CSS 类名，所以真正重要的是特异性。假设 newClassName 的声明比 defaultClassName 中的声明更不具体 - 那么 defaultClassName 中更具体的声明将胜出。您可以通过确保您想要“获胜”的语句更加具体来修复您的 CSS。

查看计算器，如 this one

如果你使用内联 CSS-in-JS 样式，我认为这样的事情可能会奏效：

function withCombinedStyles(WrappedComponent,defaultStyles) {
    return ({styles: newStyles,...rest}) => {
        return <WrappedComponent style={{...defaultStyles,...newStyles}} {...rest} />;
    };
};

,

检查this out .logo.logo，但方式更简洁。