重写 css 而不使用 !important - 语义 UI React

Question

我正在使用带样式的组件来为 table 和 React 中的语义 UI 工具包框架设置样式。

这段代码给了我想要的外观，间距 table 行：

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 的情况下获得我想要的效果吗？非常感谢

Answer 1

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

Answer 2

明白了，我使用的是语义样式变量，而不是使用默认的 css 样式变量。参考这个 post 之后我也不想使用 !important: Is it bad to use !important in css property

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

Override css without using !important - Semantics UI React