在不使用 !important 的情况下覆盖 css - Semantics UI React答案

【问题标题】：Override css without using !important - Semantics UI React在不使用 !important 的情况下覆盖 css - Semantics UI React
【发布时间】：2021-04-14 01:53:59
【问题描述】：

我正在使用样式化组件通过 React 中的 Semantics UI 工具包框架来设置表格样式。

这段代码给了我想要的外观，间隔表格行：

const MembersTable = styled(Table)({
borderSpacing: "0 1em !important",
border: "none !important",
width: "75vw !important",  
});

但是，我不想使用 !important 来覆盖 css。

我有这段代码，但它似乎不起作用：

const MembersTable = styled(Table)`
&&&
{
    borderSpacing: "0 1em";
    border: "none";
    width: "75vw";
}
`;

谁能建议我如何在不使用 !important 的情况下获得我想要的效果？非常感谢

【问题讨论】：

你为什么不想使用!important？
让调试更加困难
stackoverflow.com/questions/8360190/…
您是否尝试过增加特异性，这是除了使用 !important 之外的唯一方法

标签： css reactjs overriding semantic-ui

【解决方案1】：

语义 UI 尝试为您提供所有可能的变体，以便您始终可以从给定的选项中进行选择。不幸的是，有几次这些选项还不够，所以在这些情况下，您只有 2 个选项，要么使用 !important，要么为元素样式提供比语义 UI 中的选择器更具体的选择器。

【讨论】：

【解决方案2】：

想通了，我使用的是语义样式变量，而不是使用默认的 css 样式变量。参考这篇文章后我也不想使用！important：Is it bad to use !important in css property

const MembersTable = styled(Table)`
&&&{
    border-spacing: 0 1em;
}

【讨论】：