title: How to override a css class in style component
body: <p>In <code>Search.tsx</code>: </p>
  
  <pre><code>import { SearchInput } from Search.styles.ts
  
  &lt;SearchInput
      onChange={handleChange}
      value={values["searchValue"]}
      placeholder="Search"
      type="text"
      name="searchValue"
  /&gt;
  </code></pre>
  
  <p>Output html:</p>
  
  <pre><code>&lt;div class="1"&gt;
    &lt;div class="2"&gt;
      &lt;div class="3"&gt;
        &lt;span class="InputWrapper"&gt;
          &lt;input placeholder="Search" name="searchValue" class="Input input normalVariant" formnovalidate="" type="text" value="" &gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In <code>Search.styles.ts:</code></p>
  
  <pre><code>import * as Toolkit from "@some_repo/toolkit";
  export const SearchInput = styled(Toolkit.Input)`
    InputWrapper: 100%
  `
  </code></pre>
  
  <p>I want set <code>InputWrapper: width 100%</code>, what is the correct way to do it?</p>