Tengo Bulma instalada en mi proyecto React.js.
Tengo un componente simple en el que intento personalizar el color:
function Colortest() { return ( <div> <section className="hero $black"> <h1>Color Test</h1> </section> </div> ); } export default Colortest; is-primary , junto con muchos otros estilos de Bulma. Sin embargo, cuando trato de usar algunas variables , no funciona.
Aquí están mis "dependencias" en mi archivo raíz package.json:
"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" },Este es mi archivo App.js:
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;Claramente, me estoy perdiendo algo simple. ¿Qué estoy haciendo mal?
Para usar variables con Bulma, debe instalar y configurar SASS, que es un compilador de CSS, en su proyecto.
Puede consultar bulma-start para un proyecto inicial que tenga estas dependencias configuradas.
Después de instalar estas dependencias, debe escribir su propio archivo .scss o .sass como
// styles.scss file @import "bulma/bulma.sass"; .colortest { color: $white; background-color: $black; } o, archivo .sass como
// styles.sass @import "bulma/bulma.sass" .colortest color: $white background-color: $blackDespués de esto, solo tiene que importar este estilo a su componente como
import "./styles.scss" // or, // import "./styles.sass"marque este codeandbox para obtener una muestra de trabajo.