How can I add custom CSS to my React component and override the default CSS value?

Question

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.

Here is the Button.js file

    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 
    }) => {

        const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0]

        const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0]

        return (
            <button className={`btn ${checkButtonStyle} ${checkButtonSize}`} onClick={onClick} type={type}>
                {children}
            </button>
        )
    }

Here is the Button.css

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

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.

        import React, { Component } from 'react';
        import { MenuItems } from "./MenuItems"
        import { Button } from "../Button"
        import './Navbar.css'

        class Navbar extends Component {
            render() {
                return (
                    <nav className="NavbarItems">
                    <Button className="btn-mobile">Sign Up</Button>
                    </nav>
                    
                )
            }
        }

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

Answer 1

The way that I generally accomplish this is to accept className as a prop and spread it into the default classes of the element, like so:

const Button = ({className='', text, ...rest}) => (
  <button className={`my-button-class ${className}`} {...rest}>{text}</button>
)

Then you could use it like so:

<Button className="my-custom-class" text="press me" id="my-id" />

and it will render as

<button class="my-button-class my-custom-class" id="my-id">press me</button>

By defaulting the className prop to an empty string, it won't be added as the string of "undefined" if the implementation doesn't pass a className. Note that we also spread in any other props that were passed.