title: Overriding PrimeReact Styling
body: <p>I am trying to find the best solution for overriding the default 'Nova' theme used for Prime React. I am aware they have a theme designer available to purchase however I would ideally like to not use that.
  Previously I was having a scss file with every tsx file in my react application. I was using lines such as -</p>
  <pre><code>.p-dropdown-trigger {
     background-color: brown !important;
     margin-left: 5px !important;
  }
  
  </code></pre>
  <p>I was basically putting !important everywhere and it began to get very messy.
  I have thought about commenting out the import for the Prime React theme in my index.tsx file</p>
  <pre><code>// import 'primereact/resources/themes/nova/theme.css';
  </code></pre>
  <p>And importing my own scss instead..</p>
  <pre><code>import './styles/Override.scss';
  </code></pre>
  <p>This makes the styling disappear completely and the page looks like it's purely html. I am thinking maybe I should copy all the code from the Nova theme file and then slowly start adjusting it in the override file.</p>
  <p>Has anyone got a better way or any ideas?</p>
  <p>Thanks</p>