Можем ли мы переопределить переменные scss vai реагировать на реквизиты? Возможно ли это?

Question

Прошло 2 дня, я не могу найти никаких решений. У меня нет решений, однако :( У меня есть цветовые состояния. Я выберу цвет из палитры цветов, я обновлю это конкретное цветовое состояние: Требованиеесли я выбираю из палитры цветов, он должен быть передан из свойства реагирования js или переменных в scss переменную n и переопределить их. это должно быть сделано с помощью responserjs для scss, если это можно сделать из js в css, то это можно сделать из реактора js вscss, что это за вещь, которой мне не хватает.

App.js

{
  primary: '#1976D2',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FFC107'
} 

ex: primary: '#1976D2' Я выберу обновление до primary: '#ffffff' что-то вроде:

App.js

changeColor(e){
  this.setState({primary:e.target.value}) // the value is updated to #ffffff
}

Теперь мне нужно передать this.props.primary .scss что-то вроде:

variables.scss

$primary:this.props.primary

login.scss

.btn{ 
    background-color:$primary
 }

мне нужно, чтобы он был динамическим, если я выбираю из палитры цветов, он должен быть передан из свойства или переменных реагирования js в переменную scss n и переопределить их

Мы можем это сделатьвстроенный стиль, но я хочу сделать это так, как описано выше (через .scss). Возможно ли это?y лучший способ?

что-то вроде этого

https://vuetifyjs.com/en/style/theme

vuejs использует тему, которая пересекает переменные scss

Vue.use(Vuetify, {
 theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
 }
})

Может кто-нибудь, пожалуйста, объясните мнекак они поживают я не понимаю

Answer 1

Во-первых.Просто для ясности.Вы не можете изменять переменные SASS из браузера.Потому что, как это работает: код SASS -> скомпилирован в CSS -> CSS отправляется с сервера в браузер ->.Таким образом, нам на самом деле следует искать «как переопределить с помощью JS то, что было переменной SASS согласованным образом».

Единственный способ, который я вижу, это использовать пользовательские свойства CSS.Взгляните на spec , чтобы понять их предостережения (например, его нельзя использовать как часть значения размера в @media) и поддержку в браузерах .

IЯ не совсем уверен, поддерживает ли SASS компиляцию переменных в пользовательские свойства CSS.Взгляните на css-vars mixin.С помощью

$css-vars-use-native: true;

вы получите ваши переменные, экспортированные как пользовательские свойства CSS. К сожалению, это означает, что вам нужно изменить существующие стили, чтобы использовать var() из mixin для переменных, которые вы хотите переопределить позже

Тогда ваш код сможет переопределить любое из пользовательских свойств

document.body.style.setProperty('--primaryColor', myColorValueFromDatePicker)

Ознакомьтесь с краткой и краткой статьей о том, как изменять пользовательские свойства с помощью JS

NB, поскольку в пользовательских свойствах используется тот же каскадный подход, что илюбой CSS, который вы дополнительно получаете, может применить измененное значение к любой части DOM:

document.querySelector('#previewBlock').style.setProperty(....);

Answer 2

Вместо этого я бы использовал Styled Components.Там вы можете передать свой стиль реквизитам

https://www.styled -components.com / docs / advanced