✳flâneur — a map of the web's best reading

CSS modules | Mantine

mantine.dev · 764 words · saved by 1 readers

All Mantine components use CSS modules for styling. It is recommended to use CSS modules in your project as well, but it is not required – Mantine components are fully compatible with any third-party styling solution and native CSS. CSS modules are supported out of the box by all major frameworks and build tools. Usually, all you need to do is to create *.module.css file: And then import it in your component: When you create a *.module.css file, your build tool will generate a unique class name for each class in your file. For example, when you import the following file in your .js/.ts file: You will get an object with unique class names: With CSS modules, you do not need to worry about class name collisions, you can use any class name you want. To reference global class names in CSS Modules, you can use :global selector: The code above will compile to the following CSS: You can add styles to most of Mantine components using className prop – the same way as you would do with a regular

CSS modules | Mantine CSS modules All Mantine components use CSS modules for styling. It is recommended to use CSS modules in your project as well, but it is not required – Mantine components are fully compatible with any third-party styling solution and native CSS. Usage CSS modules are supported out of the box by all major frameworks and build tools. Usually, all you need to do is create a *.module.css file: /* Button.module.css */ .button { color: red; } Expand code And then import it in your component: import classes from './Button.module.css'; function Demo() { return ( <button className=

Explore this link on the map →

related reading