"Is there a way to modify the value of a CSS selector property dynamically within a React JS code

Question

"Is there a way to modify the value of a CSS selector property dynamically within a React JS code

Is there a way to dynamically change the color of a specific selector in a React component? In my SCSS file, I have the following rule:

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

But I want to change this color to yellow, red, or something else in my React code.

I can't use the style property for the element because I need the selector to apply to all subchilds.

Are there any native ways to achieve this, or should I use Radium or similar libraries? Maybe CSS-Next could help with this?

I have a color picker, so I can't write class styles for every color.

For those who can provide an answer, please note:

I have a selector in an SCSS file that is imported in a root JS file with .class * {color: $somecolor}, and I need to change the $somecolor in that selector while picking colors in a color picker.

Is there a way to set a selector for all items nested inside the style property, or is there a way to recursively apply CSS styles to every nested item from the style prop?

css reactjs sass css-selectors radium

Answer 1

Answer №1

Can you explain

class NewComponent extends React.Component {
  render() {
    const green = true // Your condition
    
    return(
      <div className={`foo bar var ${green  && 'green'}`}
        New item
      </div>
    )
  }
}

.foo.bar.var {
  & * {
    color: red;
  }
  &.green * {
    color: green;
  }
}

Answer 2

Can you explain

class NewComponent extends React.Component {
  render() {
    const green = true // Your condition
    
    return(
      <div className={`foo bar var ${green  && 'green'}`}
        New item
      </div>
    )
  }
}

.foo.bar.var {
  & * {
    color: red;
  }
  &.green * {
    color: green;
  }
}

Answer 3

Answer №2

To implement a custom CSS property (CSS variables), you can define it using the style attribute of an element and then assign the value to a prop or state.

<div className='custom-element' style={{ "--my-property": props.value }}></div>

This custom property can be used with any selector that applies to the component or its children. For example:

.custom-element * {
  property: var(--my-property);
}

Check out a similar code snippet here

Answer 4

To implement a custom CSS property (CSS variables), you can define it using the style attribute of an element and then assign the value to a prop or state.

<div className='custom-element' style={{ "--my-property": props.value }}></div>

This custom property can be used with any selector that applies to the component or its children. For example:

.custom-element * {
  property: var(--my-property);
}

Check out a similar code snippet here

Answer 5

Answer №3

Perhaps this question may come across as silly, but I am curious if this method is effective.

import customCss from './mydesign.css';

customCss.foo.bar.property = "your chosen color"

Answer 6

Perhaps this question may come across as silly, but I am curious if this method is effective.

import customCss from './mydesign.css';

customCss.foo.bar.property = "your chosen color"

"Is there a way to modify the value of a CSS selector property dynamically within a React JS code

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to change a react-query query dynamically on the fly?

Bootstrap grid not maintaining consistent column widths

Can a sophisticated matrix-like design be created using a CSS grid system?

center menu items will be displayed as a fallback in case flexbox is unavailable

Resize images in PHP and MySQL with precision without distorting the image

Troubleshooting typescript error in styled-components related to Material-UI component

Encountering the "processGoogleToken is not defined" error while using react-snap

Redux Error: The function concat cannot be applied to state.favorites with TypeError

Concealing overflow for text content through CSS styling

Guide on extracting unique key values from an array by utilizing a different key

Eliminate whitespace on the right side of a webpage using Bootstrap

The impact of CSS positioning relative on the height of an element

Error encountered when starting Npm: events.js:292 triggers an unhandled exception

Bootstrap's Vertical Margin Concept

Show button image beyond the limits of the hyperlink

Adjustable Text Size with HTML5 and CSS3

How can I activate a disabled option number 2 after selecting option number 1?

The dynamic value feature in Material UI React's MenuItem is currently experiencing functionality issues

The altered variable refuses to show up

Is it possible to create this Mobile/Desktop design using Bootstrap (or another grid system)?