I have Bulma installed in my React.js project.
I've got a simple component where I'm trying to customize the color:
function Colortest() {
return (
<div>
<section className="hero $black">
<h1>Color Test</h1>
</section>
</div>
);
}
export default Colortest;
is-primary works, along with many other Bulma styles. When I try to use some variables, however, it doesn't work.
Here are my "dependencies" in my root package.json file:
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
This is my App.js file:
import "bulma/css/bulma.min.css";
import Header from './components/Header';
import Body from './components/Body';
import Colortest from "./components/Colortest";
const App = () => {
return (
<div>
<Header />
<Colortest />
<Body />
</div>
);
};
export default App;
Clearly, I'm missing something simple. What am I doing wrong?
To use variables with Bulma, you have to install & configure SASS, which is a CSS compiler, in your project.
You may check bulma-start for a starter project which has these dependencies configured.
After having these dependencies installed, you have to write your own .scss or .sass file like
// styles.scss file
@import "bulma/bulma.sass";
.colortest {
color: $white;
background-color: $black;
}
or, .sass file as
// styles.sass
@import "bulma/bulma.sass"
.colortest
color: $white
background-color: $black
After this, you only have to import this style into your component like
import "./styles.scss"
// or,
// import "./styles.sass"
check this codesandbox for a working sample.