Search code examples
cssreactjsoverridingsemantic-ui

Override css without using !important - Semantics UI React

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

Solution

  • 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;
}