Search code examples
cssreactjsstyling

how to pass variable from main folder as property in module.css in React

In react project using module.css styling I want to make a main folder with variables commonly used for example file variable.js where I will have

export const colors = {
    buttonBackground:"#FFFFFF"
}

I want to pass it to certain classes. Will it work if for example in list.module.css file I will write:

import {colors} from "..."

.complete {
   background-color:${colors.buttonBackground}
}

Or it should be coded in different way ? Sorry I don't have possibility now to test it on my own that's why I write and describe it.

thanks

regards

Solution

  • in case you need to use some js constants you can have a look at JSS which is a way to write css in js, you can integrate JSS in your react app using this guide