reactjs - How to put Bulma Buttons CSS for the React Components?

Question

The following component is part of To Do List Application. I would like to create four Filter Buttons (All, Active, Completed, Important). May I please ask how to place Bulma CSS Rules for this react component?

Screenshot 1 -

Filter Buttons Component

import React from "react";

function FilterButton(props){
    return (
        <button 
            type="button" 
            className="buttons"
            onClick={()=>props.setFilter(props.name)}
        >
            <span className="visually-hidden">Show</span>
            <span>{props.name}</span>
            <span className="visually-hidden">tasks</span>
        </button>
    );
}

export default FilterButton;

Answer 1

You can use button component like this.

<button
    className={`button is-${props.name}`}
    onClick={()=>props.setFilter(props.name)}
>