How to customize the background-color of buttons in React JS using className in react-bootstrap PopOver

Question

How to customize the background-color of buttons in React JS using className in react-bootstrap PopOver

I am currently working on a React JS component that includes multiple buttons, each of which triggers a different popover or tooltip message. I am trying to assign unique background colors to each popover title. I have added the styling for these colors in my CSS file and in my JSX code, implemented a function that retrieves the appropriate background color styling for each popover. However, the coloring is not displaying as expected. I've noticed others using .popover-titles in the CSS, but this would cause all popovers to have the same color. What I need is to apply individual colors to each button's popover.

Any assistance on this matter would be greatly appreciated. Thank you.

import styles from 'cssFile'

CSS

:local .greenColor
  background-color: F990099
  color: #000000


JSX code

<Popover id="1" title="test title" className={this.getBackgroundColor()}>test</Popover>

// There are multiple Popover elements like this one. I want to use the getBackgroundColor function to retrieve specific styling for each.


getBackgroundColor = () => {
  return 'styles.greenColor';
}

css reactjs twitter-bootstrap

Answer 1

Answer №1

If you want to achieve this effect:

import React from "react";
import ReactDOM from "react-dom";
import Popover from "react-popover";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { id: -1, color: "white", isOpen: false };
  }

  togglePopover = (e, _id, _color) => {
    if (_id !== this.state.id && this.state.isOpen) {
      this.setState({ isOpen: !this.state.isOpen }, function() {
        this.setState({ id: _id, color: _color, isOpen: !this.state.isOpen });
      });
    } else
      this.setState({ id: _id, color: _color, isOpen: !this.state.isOpen });
  };

  render() {
    return (
      <div className="App" style={{ margin: "50px" }}>
        <div>
          <Popover
            style={{ backgroundColor: this.state.color, color: "white" }}
            isOpen={this.state.isOpen && this.state.id === 1}
            body={<div className="Balloon">Popover Content</div>}
          >
            <button onClick={e => this.togglePopover(e, 1, "red")}>
              Toggle Popover
            </button>
          </Popover>
        </div>
        <br />
        <br />
        <div>
          <Popover
            style={{ backgroundColor: this.state.color }}
            isOpen={this.state.isOpen && this.state.id === 2}
            body={<div className="Balloon">Popover Content</div>}
          >
            <button onClick={e => this.togglePopover(e, 2, "yellow")}>
              Toggle Popover
            </button>
          </Popover>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You can also utilize the togglePopover function as a mouse-over method which will work for any number of Popovers without needing to change the internal code.

Check out the answer output: HERE

Answer 2

If you want to achieve this effect:

import React from "react";
import ReactDOM from "react-dom";
import Popover from "react-popover";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { id: -1, color: "white", isOpen: false };
  }

  togglePopover = (e, _id, _color) => {
    if (_id !== this.state.id && this.state.isOpen) {
      this.setState({ isOpen: !this.state.isOpen }, function() {
        this.setState({ id: _id, color: _color, isOpen: !this.state.isOpen });
      });
    } else
      this.setState({ id: _id, color: _color, isOpen: !this.state.isOpen });
  };

  render() {
    return (
      <div className="App" style={{ margin: "50px" }}>
        <div>
          <Popover
            style={{ backgroundColor: this.state.color, color: "white" }}
            isOpen={this.state.isOpen && this.state.id === 1}
            body={<div className="Balloon">Popover Content</div>}
          >
            <button onClick={e => this.togglePopover(e, 1, "red")}>
              Toggle Popover
            </button>
          </Popover>
        </div>
        <br />
        <br />
        <div>
          <Popover
            style={{ backgroundColor: this.state.color }}
            isOpen={this.state.isOpen && this.state.id === 2}
            body={<div className="Balloon">Popover Content</div>}
          >
            <button onClick={e => this.togglePopover(e, 2, "yellow")}>
              Toggle Popover
            </button>
          </Popover>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You can also utilize the togglePopover function as a mouse-over method which will work for any number of Popovers without needing to change the internal code.

Check out the answer output: HERE

How to customize the background-color of buttons in React JS using className in react-bootstrap PopOver

Answer №1

Similar questions

Place the p elements outside of the divs and align them accordingly

Using Accordions in Jquery to dynamically adjust page height during ajax calls

What is the purpose of exporting the metadata variable in the Layout.js file in Next.js?

Exploring the new features of utilizing buttons with the onClick method in the updated nextJS version 14.1.3

Implementing Rate Limits in Next.js 14: A Guide on Programmatically Invoking React Server Actions

What is the best way to place a div inside a navbar element inline?

Tips for effectively passing arguments to useCallback

Create animations for ng-repeat elements without using ng-animate

After trying to use react-native init on macOS Catalina, I encountered a frustrating issue where the process would hang indefinitely. The error message displayed was "fetchMetadata: sill resolveWithNewModule

Obtain the rotational value in 3D CSS using JavaScript by extracting it from the matrix3d()

Two sets of scrolling bars

Unable to perform updates in MongoDB using Mongoose

I am encountering issues with the responsiveness of my layout as it is

React - Customizable Counter Components - Control All Counters with Parent Component

What is the best way to prevent one react audio player from continuing to play when starting another?

Modify the background hue of a personalized WordPress HTML block using supplementary CSS styling

Can you explain the significance of the "--" within CSS selectors?

Is it possible to utilize setState in Redux?

Unexpected rendering of data retrieved by React

Focusing on a particular iframe