Override css without using !important - Semantics UI React

Question

I'm using styled components to style a table with the Semantics UI kit framework within react.

This piece of code gives me the desired look i want, spacing table rows:

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

However, I do not want to use !important to override the css.

I have this code but it does not seem to work:

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

Can anyone suggest how I can get my desired effect without using !important? Many thanks

https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-css-property — kieron, Jan 08 '21 at 10:56
have you tried increasing the specificity, that's the only way other than using !important — Salman B, Jan 08 '21 at 10:57

score 1 · Answer 1 · answered Jan 08 '21 at 11:01

Semantic UI tries to give you all of the possible variations so that you can always choose from the given options. Unfortuntely, there are several times that those options are not enough, so in these cases you just have 2 options, either to use !important or to give the element styles with a more specific selector than the one from Semantic UI.

score 0 · Accepted Answer · edited Jan 08 '21 at 20:22

0

Figured it out, I was using Semantics styling variables, and not using the default css styling variables. I also did not want to use !important after referring to this post: Is it bad to use !important in css property

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

edited Jan 08 '21 at 20:22

E_net4

27,810
13
101
139

answered Jan 08 '21 at 13:29

kieron

332
3
19

Override css without using !important - Semantics UI React

2 Answers2