Htykuut

Its been 2 whole days i can't find any solutions.I have no solutions yets:( I'm having color states. I'll select from color picker a color, I'll update that particular color state:
Requirement is if I pick from color picker it must be passed from react js property or variables to scss variable n override them. it must be done via reacrjs to scss if it can be done from js to css then it can be done from reacr js to scss whats that one thing which m missing on it.

App.js

{

  primary: '#1976D2',

  secondary: '#424242',

  accent: '#82B1FF',

  error: '#FF5252',

  info: '#2196F3',

  success: '#4CAF50',

  warning: '#FFC107'

} 

ex: primary: '#1976D2' I'll pick in update to primary: '#ffffff' something like:

App.js

changeColor(e){

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

}

Now, I need to pass this.props.primary to .scss something like:

variables.scss

$primary:this.props.primary

login.scss

.btn{ 

    background-color:$primary

 }

my need is it must be dynamic if i pick from color picker it must be passed from react js property or variables to scss variable n override them

We can do it inline styling but I wanna do it the way defined above (via .scss).
Is it possible?or is the any better way?

something like this

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

vuejs uses theme thats overides to scss variables

Vue.use(Vuetify, {

 theme: {

primary: '#3f51b5',

secondary: '#b0bec5',

accent: '#8c9eff',

error: '#b71c1c'

 }

})

can anyone please explain me how they r doing I'm not understanding

I would use Styled Components instead. There you can pass your styling by props

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

First. Just to clarify. You are not able to change SASS variables from browser. Because how it works: SASS code -> compiled into CSS -> CSS is sent from server to browser -> . So we actually should searching "how to override by JS something that was SASS variable in consistent way".

The only way I see doing that is using CSS custom properties. Take a look into spec to understand their caveats(e.g. it cannot be used as part of size value in @media) and about support in browsers.

I'm not really sure if SASS supports compiling variables into CSS custom properties. Take a look into css-vars mixin. With using

$css-vars-use-native: true;

you will get your variables exported as CSS custom properties. Unfortunately it means you need to change you existing styles to use var() from mixin for variables you want being able to override later

Then your code will be able to override any of custom properties as easy as

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

Take a look into fine and short article on how to change custom properties with JS

NB since custom properties uses the same cascade approach as any CSS you additional get ability to apply changed value on any part of DOM:

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