CSS - Update BackgroundColor Depending on Child Element Color

Question

CSS - Update BackgroundColor Depending on Child Element Color

Is there an official CSS way to change the background color based on the child element in HEX?

For example:

render() {
    return (
        ...
    <span>
        <h3 style={{ color: item.color }}>Item Color</h3>
    </span>
      ...
 }

I have experimented with mixBlendMode (mix-blend-mode) but it does the opposite of what I am trying to achieve.

If the text color of the h3 element is white and the background color of the span element is also white, I want to change it to black. Similarly, if the text color is black, then the background should be white.

Is there a standardized way in CSS to accomplish this? Alternatively, is there a method using JavaScript to detect the color from a HEX value?

If the text color is white, then the background color should be black.

If the text color is black, then the background color should be white.

(And likewise for other colors)

css reactjs

Answer 1

Answer №1

If you're looking for a simpler method, I have a solution that might work for you. Here's what I came up with:

Start by adding a reference tag to the element you want to monitor:

<h3 ref={"tag"} style={{ color: item.color }}>Item Color</h3

Then, utilize lifecycle methods to track the color and store it in React state:

componentDidMount() {
    let taggedColor = window.getComputedStyle(this.refs.tag);
    this.setState({
      taggedColor: taggedColor.color
    });
  }

  componentDidUpdate() {
    let taggedColor = window.getComputedStyle(this.refs.tag);
    if (taggedColor.color !== this.state.taggedColor) {
      this.setState({
        taggedColor: taggedColor.color
      });
    }
  }

The getComputedStyle function converts HEX values to RGB, allowing you to use conditional statements based on the RGB colors:

<span
        style={
          this.state.taggedColor === "rgb(17, 17, 17)"
            ? { backgroundColor: "#fff" }
            : { backgroundColor: "#111" }
        }
        className="App"
      >
         <h3 ref={"tag"} style={{ color: item.color }}>Item Color</h3
      </span>

There may be simpler approaches out there, but this is the solution I devised. Feel free to explore other options as well.

Answer 2

If you're looking for a simpler method, I have a solution that might work for you. Here's what I came up with:

Start by adding a reference tag to the element you want to monitor:

<h3 ref={"tag"} style={{ color: item.color }}>Item Color</h3

Then, utilize lifecycle methods to track the color and store it in React state:

componentDidMount() {
    let taggedColor = window.getComputedStyle(this.refs.tag);
    this.setState({
      taggedColor: taggedColor.color
    });
  }

  componentDidUpdate() {
    let taggedColor = window.getComputedStyle(this.refs.tag);
    if (taggedColor.color !== this.state.taggedColor) {
      this.setState({
        taggedColor: taggedColor.color
      });
    }
  }

The getComputedStyle function converts HEX values to RGB, allowing you to use conditional statements based on the RGB colors:

<span
        style={
          this.state.taggedColor === "rgb(17, 17, 17)"
            ? { backgroundColor: "#fff" }
            : { backgroundColor: "#111" }
        }
        className="App"
      >
         <h3 ref={"tag"} style={{ color: item.color }}>Item Color</h3
      </span>

There may be simpler approaches out there, but this is the solution I devised. Feel free to explore other options as well.

CSS - Update BackgroundColor Depending on Child Element Color

Answer №1

Similar questions

Ways to display additional text with a "Read More" link after three lines of content without relying on a

What could be the reason the background-color isn't changing when I apply button:hover?

Ways to stop a background image from repeating?

Troubleshooting issues with React styled components and child elements not responding to media queries?

Steps for adding a forked version of a library in package.json

Tips for keeping my wordpress menu at the forefront

Utilizing a flexbox container within a table container, implementing PRE tags for handling overflow

Using ES6 syntax, ignite the React function

The Iframe contains its own scroll feature within the body

React Native SectionList Divided by Dates

What are some best practices for implementing responsive design using CSS @media queries with makeStyles in React.js Material UI?

Dynamic Pagination with MUI Counting

Difficulty in monitoring the present machine status through XState in a React application

What are the pros and cons of embedding background image data into CSS as Base64?

What causes a TypeError (Invalid response status code) when a 204 response is returned to a fetch() call within a React Server Component?

React error: "Unable to locate property 'bind' within the undefined"

Struggling to change h2 style on WordPress?

Is there a way to prevent the Material UI Chip component from appearing when there is no content present?

Error encountered when attempting to integrate FontAwesome into the body of a Next.js Link

Choose the element that is trapped within the div