Apologies for the lack of clarity in my initial question. I am currently working on a web project using reactjs and utilizing jss for UI style. In my design, I am limited to only 4 colors, with certain elements across multiple components sharing the same styles. For instance, both my header and footer feature the same button style. I am looking to establish a global CSS class for this button, along with global color variables to streamline the process and avoid repetitive HEX code usage.
Within my header style.js file, you can see that I am repeating the same line twice: color: "#02cdce". How can I create a global variable for this HEX code and reference its name instead of the code itself, while also implementing a global CSS class to assign to desired elements?
export const useStyles = makeStyles((theme) => ({
brand: {
"&::after": {
content: '"Khai"',
**color: "#02cdce",**
fontWeight: "bold",
},
},
menuItem: {
"&:hover": {
**color: "#02cdce",**
transition: "all 0.4s",
},
},
}));
Thank you for taking the time to read through my inquiry.