Напрямую меняйте переменную LESS в React - PullRequest
Новая
       7

Напрямую меняйте переменную LESS в React

0 голосов
/ 02 октября 2018

Возможно ли динамическое изменение переменной LESS на стороне React?Если нет, то как лучше это сделать?

Пройдя несколько уроков, я попытался использовать less-vars-to-js с fs.Тем не менее, нельзя использовать fs в реакции.

base.less 

   @theme: 'main';
   @default: '@{theme}-theme';
   @main: '@{theme}-theme';

   @default: #fff;
   @main: #0e2336;

    body {
      & when (@theme = 'main') {
        font-size: 9px;
        color: #fff;
      }
      background-color: @@theme;
      color: #0e2336;
    }

реагирует: 

import './themes/base.less'
import { Switch} from 'antd'
import less from 'less' //this isn't correct, but Im trying to demonstrate what I'd like to do

class App extends React.Component {
        constructor(props) {}
        onChange = checked => {
       if (checked) {
         less.modifyVars({
           '@theme': 'main'
         })
       } else {
         less.modifyVars({
           '@theme': 'default'
         })
       }
       less.refreshStyles()
     }
        render() {
           <Switch defaultChecked onChange={this.onChange} />
}
}
...