如何在 react-js 中共享从 js object 到 sass 变量的值？

Question

I'm trying to change my application theme colors dynamically. I want to get object from the server that has the values of the colors by JavaScript, then pass these values to sass variables.

I found many articles about this but nothing worked for me below some of them:

https://itnext.io/sharing-variables-between-js-and-sass-using-webpack-sass-loader-713f51fa7fa0

https://github.com/pmowrer/node-sass-json-importer#node-sass-json-importer

Is there a way to import variables from javascript to sass or vice versa?

https://frontend-cookbook.ack.ee/pages/implementation/SharingVariables.html

Answer 1

I suggest you to use inline styling for that theme color

<SomeComponent className={this.state.themeColor === 'black'? 'classDarkMode' : 'classNormalMode'} />

You might also use lib like styled components that allow you to pass props directly into styles

Answer 2

Using javascript you can not change the value of scss files because scss is compiled into css in the server and then sent to the client where the javascript is executed.

However you can achieve that via css variables ( more here ). You could use css variables with a default value and then change the value of the variable via JS.

Answer 3

Another easy way is injecting color variables into your head: :)

Example:

Create utils/addStyle.js and add the addStyle function in it like this:

function addStyle(styleString) {
  const style = document.createElement("style");
  style.textContent = styleString;
  document.head.append(style);
}

export default addStyle;

... and then in your config/colors.js :

import addStyle from "../utils/AddStyle";

const colors = {
  primary: "#0084E7",
  primaryLighter: "#2897ec",
  primaryLightest: "#4db2ff",
  primaryWhitish: "#bbe0fd",
  primaryDarker: "#0076d1",
  primaryDarkest: "#016abb",
  primaryText: "#fff",
  secondary: "#FFE801",
  secondaryLightest: "#fffbd7",
  secondaryText: "#000",
};

addStyle(`
  :root {
    --color-primary: ${colors.primary};
    --color-primaryLighter: ${colors.primaryLighter};
    --color-primaryLightest: ${colors.primaryLightest};
    --color-primaryWhitish: ${colors.primaryWhitish};
    --color-primaryDarker: ${colors.primaryDarker};
    --color-primaryDarkest: ${colors.primaryDarkest};
    --color-secondary: ${colors.secondary};
    --color-secondaryLightest: ${colors.secondaryLightest};
  }
`);

export default colors;

Now you can use these colors both in css/scss and in js files. Eg,. to share colors between MUI and sass files, So in MUI: you use these colors by importing the exported colors object:

import colors from "../config/Colors";
// in your theme:
  palette: {
    primary: {
      main: colors.primary,
      lighter: colors.primaryLighter,
//...

and in your scss files like this:

.classname {
  background-color: var(--color-secondaryLightest)
}

---

_{Credit: This answer was inspired by this article by Santiago Vilar .}