title: Override css without using !important - Semantics UI React
body: <p>I'm using styled components to style a table with the Semantics UI kit framework within react.</p>
  <p>This piece of code gives me the desired look i want, spacing table rows:</p>
  <pre><code>const MembersTable = styled(Table)({
  borderSpacing: &quot;0 1em !important&quot;,
  border: &quot;none !important&quot;,
  width: &quot;75vw !important&quot;,  
  });
  </code></pre>
  <p>However, I do not want to use !important to override the css.</p>
  <p>I have this code but it does not seem to work:</p>
  <pre><code>const MembersTable = styled(Table)`
  &amp;&amp;&amp;
  {
      borderSpacing: &quot;0 1em&quot;;
      border: &quot;none&quot;;
      width: &quot;75vw&quot;;
  }
  `;
  </code></pre>
  <p>Can anyone suggest how I can get my desired effect without using !important? Many thanks</p>