Looking to integrate a Filter Buttons component into a To Do List Application. Specifically, I want to add four buttons for filtering tasks (All, Active, Completed, Important). Can someone guide me on how to incorporate Bulma CSS Rules with this react component?
Screenshot 1 -
https://i.sstatic.net/phdsO.jpg
Custom 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;