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

Props are essentially just function arguments and if you don't proceed to use them inside the function body (in the React context this would be the component) then they will simply be ignored. That's why no style declarations will take effect by simply giving a component a className prop. Note that this may work if you use some component libraries, but only because they implemented logic to make use of that className prop. — hotpink
– hotpink, Commented Jul 4, 2020 at 19:07

Alexander Nied · Accepted Answer · 2020-07-05 15:01:54Z

2

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.

edited Jul 5, 2020 at 15:01

answered Jul 4, 2020 at 18:56

Alexander Nied

13.8k4 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Nied Over a year ago

@hotpink - teeny-tiny but critical! Fixed now; thanks!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related