2

I need to dynamically change the color in the react component for specific selector. In scss (use sass) i have the following rule:

foo.bar.var * {
  color: blue;
}

I want to change it in react code, to be yellow, red or something else.

I cant use style property for element, cause i need the selector to apply for all subchilds !=)

Is there any native ways? Or should i use Radium? Or is there any similar libs for this? Maybe css-next some hove can help with this?

I have color picker, i cant write class styles for every color =(

For some answerers NOTE:

So i have selector in some scss file, that imported in some root js file with .class * {color: $somecolor} and i need change the $somecolor in that selector, during picking colors in color picker

Maybe i can somehow set selector for all nested inside style property? or there is the way how to recursively apply css style for every nested items from the style prop?

sky great
  • 31
  • 1
  • 5

3 Answers3

1

What about 

class MyComponent extends React.Component {
  render() {
    const yellow = true // Your condition
    
    return(
      <div className={`foo bar var ${yellow  && 'yellow'}`}
        My item
      </div>
    )
  }
}
.foo.bar.var {
  & * {
    color: blue;
  }
  &.yellow * {
    color: yellow;
  }
}
RMontes13
  • 2,138
  • 3
  • 16
  • 23
  • I have color picker, i cant write style for every color =( – sky great Oct 11 '17 at 09:47
  • I need to change exatcly the value of css property inside the selector – sky great Oct 11 '17 at 10:38
  • You cannot apply the style tag in your subchild's parent? – RMontes13 Oct 11 '17 at 10:59
  • what exactly do you mean? i have many nested element in current component. like div inside div inside div inside div inside div. If i change the style for maing(root/parent) the color will be changed only in it. But i need it to be applyed to every recoursively. Other styles like bootstrap set colors for them , so i should use the selector, to apply the color style prop, to overwrite other selector (like bootstrap, or somethng else) – sky great Oct 11 '17 at 11:39
  • Can you post an example of your HTML for the color picker? – RMontes13 Oct 11 '17 at 12:26
  • Its just https://github.com/casesandberg/react-color i use it to change color, then this color (variable i need to set to the css selector – sky great Oct 11 '17 at 12:32
1

You could define a custom CSS property (CSS variables) using the style attribute of the element and assign the value to a prop, state etc.

<div className='foo bar var' style={{ "--my-color": props.color }}></div>

The custom property would work for any selector that apply to that component or children. So you could use it like that:

foo.bar.var * {
  color: var(--my-color);
}

See a snippet with similar code here

Silveste
  • 189
  • 2
  • 11
0

this may sound stupid . but does this work ?

import myCss from './mydesign.css';

myCss.foo.bar.var = "your color"
Jeffin
  • 1,099
  • 12
  • 23
  • What if i have the file, in which i imported every css files one by one. I dont import css in each component. How to deal with such case? Will it be wrong, that i import the css in the component again? – sky great Oct 11 '17 at 09:06
  • If you are importing all css in parent component and you want it to be changed from a child component , you dont have to import the css in your child component , make a function where you will change the color in the parent component and send it as props to the child component and whenever you need to change color from the child component just call the props from child component and it will work , Right ? – Jeffin Oct 11 '17 at 09:09
  • I dont know =( now i have something like this in my root `import './my_scss/bootstrap/css/bootstrap.css'; import './my_scss/custom.scss';` Should i change something if i ll assign imported to variable? Or everything will work the same if assigning to variables ? =) – sky great Oct 11 '17 at 09:20