How to Use Less Variable in React Js

How to use LESS variable in React JS

You cannot use variables from CSS-precompilers like LESS inside of your JSX. You can either use JavaScript variables like

const redColor = "#FF0000";

<p style={{ color: redColor }}

Or give it a className and let your CSS handle the rest.

Another option would be to add a loader like less-vars-to-js to map your LESS variables (I'm assuming you mean LESS as you're using @) to JavaScript.

And another option would be to use native CSS variables as other answers suggested, you can use these variables within your JavaScript, the downside on this is that they aren't supported by all browsers (yet).

Import .less variables to use within React Styled Components

It is possible. I guess you use Webpack, you just need to configure webpack loaders so that when an import '*.less' is found, it :

• compiles less into css
• setups the css to be a css module

The webpack configuration looks like this :

rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true
            }
          },
          {
            loader: "less-loader"
          }
        ]
      }
    ]

Source : here

Note that when configuring webpack loaders, the loaders (in the use array) are called in reverse order at compile time.

Dynamically changing Less variables in React Gatsby app with Ant Design at runtime

Ant Design team has just released - TODAY - a new alpha version that includes dynamic theming, using CSS Variables.

https://ant.design/docs/react/customize-theme-variable

It works fine, so far.

EDIT - Detailed solution

I removed gatsby-plugin-antd and gatsby-plugin-less from the project. Also removed the import of antd less file.

Instead, in my styles/index.tsx (which is imported in gatsby-browser.js), I'm importing the variables.min.css file:

import 'antd/dist/antd.variable.min.css';

Then, whenever I want to change Ant Design variables, I just use:

import { ConfigProvider } from 'antd';

...

ConfigProvider.config({
  theme: {
    primaryColor: '#[DESIRED_COLOR_HEX]'
  }
});

Provider

Since this has to be done every time the site is loaded, I'm creating a ThemeProvider that wraps every page and defines the theme. It fetches theme data from the backend and sets Ant Design theme variables.

Example code:

import { Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import { ConfigProvider } from 'antd';
import { Theme } from './theme.interface';

interface Props {
  children: React.ReactNode;
}

export const ThemeProvider = ({ children }: Props): JSX.Element => {
  const [themeVars, setThemeVars] = useState<Theme>(null);

  useEffect(() => {
    async function fetchMyAPI() {
      const result = await getThemeFromBackend(); // Make API call with Axios
      if (result) setThemeVars(result);
    }
    fetchMyAPI();
  }, []);

  useEffect(() => {
    if (themeVars) {
      ConfigProvider.config({
        theme: {
          primaryColor: `#${themeVars.primaryColor}`
        }
      });
    }
  }, [themeVars]);

  return <div>{!themeVars ? <Spin size="large" /> : <>{children}</>}</div>;
};

And it can be used like this:

...
<ThemeProvider>
  <h1>My page header</h1>
  <p>Page content...</p>
</ThemeProvider>
...

Note: You can save theme data on local storage for performance improvement, so you don't have to call your backend everytime your site reloads. Maybe you'll just have to refresh it from time to time.

How can I read Less variables in Javascript?

As I mentioned in my comment you could implement custom loader. Something like this (haven't tested)

//utils/less-var-loader.js
const lessToJs = require('less-vars-to-js')

module.exports = function(content) {
  return `module.exports = ${JSON.stringify(lessToJs(content))}`
}

and then

import * as styles from '!!./utils/less-var-loader!./style.less'

Double bang !! to ignore preconfigured loaders.

How can I use less in create-react-app as variables

yes, it's less module problem.
Just npm install --save-dev react-app-rewire-less-modules

change your **.less file to **.module.less

change your config file

const rewireLess = require("react-app-rewire-less-modules");
module.exports = function override(config, env) {
  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true,
  })(config, env);
  return config;
};

---

Related Topics