Я пытаюсь заполнить меньшее значение переменной переменной js со страницы html в приложении на основе reactjs.
index.html
<script>window.baseColor = '#000000'//Color value will be dynamic</script>
style.less
@baseColor: window.baseColor
Как вы думаете, встроенные стили реакции - правильный путь? Также нет возможности обновить меньшее количество переменных изнутри reactjs?
Less, scss и т. д. Являются препроцессорами, что означает, что они будут скомпилированы в css, прежде чем браузер сможет это понять.
Я не думаю, что это возможно, но вы можете сделать это, используя встроенный стиль, и если вы собираетесь использовать его в нескольких компонентах, вы можете использовать новый контекстный API
const BaseColorContext = React.createContext('#000000')
class ColorProvider extends React.Component {
state = {baseColor: '#fff'}
render() {
return (
<BaseColorContext.Provider value = {this.state.baseColor}>
{this.props.children}
</BaseColorContext.Provider>
)
}
}
class App extends React.Component {
render() {
return (
<ColorProvider>
<BaseColorContext.Consumer>
{val => <div style = {{backgroundColor:val}}>content here</div>}
</BaseColorContext.Consumer>
</ColorProvider>
)
}
}
Less обычно компилируется в css перед загрузкой в браузер. Итак, вы ищете переменную css или ищете встроенные стили реакции?