Search code examples
javascriptreactjsbulma

Bulma variables in React.js?

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?

Solution

  • Bulma uses Sass variables

    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.

    References: