title: How can I add custom CSS to my React component and override the default CSS value?
body: <p>I have a component for my button with its own css file, but I'm trying to figure out how to add a className directly to the component and change the CSS for mobile view. Right now, the Button.css file overrides everything and my new className added to the component doesn't even show up in the html.</p>
  <p>Here is the Button.js file</p>
  <pre><code>    import React from 'react';
      import './Button.css'
  
      const STYLES = [
          'btn--primary',
          'btn--outline'
      ]
  
      const SIZES = [
          'btn--medium',
          'btn--large'
      ]
  
      export const Button = ({ 
          children, 
          type, 
          onClick, 
          buttonStyle, 
          buttonSize 
      }) =&gt; {
  
          const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]
  
          const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]
  
          return (
              &lt;button className={`btn ${checkButtonStyle} ${checkButtonSize}`} onClick={onClick} type={type}&gt;
                  {children}
              &lt;/button&gt;
          )
      }
  </code></pre>
  <p>Here is the Button.css</p>
  <pre><code>             :root {
              --primary: #3acbf7;
          }
  
          .btn {
              padding: 8px 20px;
              border-radius: 4px;
              outline: none;
              border: none;
              cursor: pointer;
          }
  
          .btn:hover {
              background-color: transparent;
              color: #fff;
              padding: 8px 20px;
              border-radius: 4px;
              border: solid 2px var(--primary);
              transition: all 0.3s ease-out;
          }
  
          .btn--primary {
              background-color: var(--primary);
          } 
  
          .btn--outline {
              background-color: transparent;
              color: #fff;
              padding: 8px 20px;
              border-radius: 4px;
              border: solid 1px var(--primary);
              transition: all 0.3s ease-out;
          }
  
          .btn--medium {
              padding: 8px 20px;
              border-radius: 4px;
              font-size: 18px;
              color: #fff;
          }
  
          .btn--large {
              padding: 12px 26px;
              border-radius: 4px;
              font-size: 20px;
              color: #fff;
          }
  </code></pre>
  <p>And here is the main component where I'm trying to add a custom className to override the code above. Note this code is inside of a Navbar component.</p>
  <pre><code>        import React, { Component } from 'react';
          import { MenuItems } from &quot;./MenuItems&quot;
          import { Button } from &quot;../Button&quot;
          import './Navbar.css'
  
          class Navbar extends Component {
              render() {
                  return (
                      &lt;nav className=&quot;NavbarItems&quot;&gt;
                      &lt;Button className=&quot;btn-mobile&quot;&gt;Sign Up&lt;/Button&gt;
                      &lt;/nav&gt;
                      
                  )
              }
          }
  </code></pre>
  <p>If I try to add .btn-mobile to my Navbar.css, none of the properties show up in the html. I tried to add an id and still didn't work. Not sure how to custom the button since it's a component with preset properties</p>