Make the color of the chosen item black while keeping the placeholder's color grey within React Picky

Question

Make the color of the chosen item black while keeping the placeholder's color grey within React Picky

Utilizing react picky for the multiselect dropdown feature. Attempting to maintain the placeholder color as grey while displaying black text after selection.

Markup

<Picky multiple={true}
       includeFilter={true}
       onChange={this.onRulesSelectChange}
       placeholder={"Please Select"} />

In the CSS, attempting to override picky's placeholder class only affects the selected text as well, causing both to turn grey.

CSS

.picky__placeholder{
    font-family: CSePRoman, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: grey;
    line-height: 21px;
}

Current State

Placeholder -> Grey

Selected Text -> Grey

Desired Outcome

Placeholder -> Grey

Selected text -> Black

Thanks in Advance!

css reactjs

Answer 1

Answer №1

When choosing a class name that remains unchanged on an element regardless of selection status, you can keep the initial unselected value grey by following these steps.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arrayValue: []
    };
    this.onRulesSelectChange = this.onRulesSelectChange.bind(this);
  }

  //Update the state with the new array value
  onRulesSelectChange(value) {
    this.setState({ arrayValue: value });
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col">
            <h3>Multi select</h3>
            <Picky
              //Assign a class based on selected values
              className={
                this.state.arrayValue.length > 0 ? "items-selected" : "items-not-selected"
              }
              value={this.state.arrayValue}
              options={??} //Insert your options here 
              multiple={true}
              includeFilter={true}
              onChange={this.onRulesSelectChange}
              placeholder={"Please Select"}
            />
          </div>
        </div>
      </div>
    );
  }
}

Add the following CSS rule to your stylesheet:

.not-selected span.picky__placeholder {
    color: grey
}

View the live code sandbox example at: https://codesandbox.io/s/0zz0q9670

Answer 2

When choosing a class name that remains unchanged on an element regardless of selection status, you can keep the initial unselected value grey by following these steps.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arrayValue: []
    };
    this.onRulesSelectChange = this.onRulesSelectChange.bind(this);
  }

  //Update the state with the new array value
  onRulesSelectChange(value) {
    this.setState({ arrayValue: value });
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col">
            <h3>Multi select</h3>
            <Picky
              //Assign a class based on selected values
              className={
                this.state.arrayValue.length > 0 ? "items-selected" : "items-not-selected"
              }
              value={this.state.arrayValue}
              options={??} //Insert your options here 
              multiple={true}
              includeFilter={true}
              onChange={this.onRulesSelectChange}
              placeholder={"Please Select"}
            />
          </div>
        </div>
      </div>
    );
  }
}

Add the following CSS rule to your stylesheet:

.not-selected span.picky__placeholder {
    color: grey
}

View the live code sandbox example at: https://codesandbox.io/s/0zz0q9670

Answer 3

Answer №2

When working with React, you have the ability to apply dynamic styling to your components directly within JSX using the "className" attribute

.foo { color: grey;}

.bar { color: black;}

To implement this in React:

....
import styles from './styles'; // reference your CSS file

<div className={classNames({[styles.foo]: true, [styles.bar]: 
true})}>
  Your text...
</div>

This approach allows for flexible and dynamic application of styles based on conditions or user interactions.

Answer 4

When working with React, you have the ability to apply dynamic styling to your components directly within JSX using the "className" attribute

.foo { color: grey;}

.bar { color: black;}

To implement this in React:

....
import styles from './styles'; // reference your CSS file

<div className={classNames({[styles.foo]: true, [styles.bar]: 
true})}>
  Your text...
</div>

This approach allows for flexible and dynamic application of styles based on conditions or user interactions.

Make the color of the chosen item black while keeping the placeholder's color grey within React Picky

Answer №1

Answer №2

Similar questions

I could use a hand here - I'm getting an error message that says "Module not found: 'react-dev-utils/WatchMissingNodeModulesPlugin'

Arranging arrows strategically along a line and ensuring they are positioned correctly above all div elements

What is the best way to choose a slug page using the useRouter in Next

Using the <APpProvider> and <APP> components in my application causes the app to crash with the Context API

I need assistance setting up a Facebook page feed using Angular.js. I want to display the posts in a list of cards and include a fullscreen image gallery. Is

Applying padding to an absolute div inside a Bootstrap 4 parent container does not function correctly

When the object reference remains the same, useState will accept updates

Enable divs to be interactively chosen

Troubleshooting Problems with Adjusting Left Margin Using JQuery

The onClick event is not functioning properly with React's select and option elements

Submitting a form via axios using AxiosInstance for the POST request

Jest remains verdant even in cases where Expected does not match Received

Using the "margin: auto" property to center the text box

Tips for utilizing an Array in React Lifecycle:

Managing data in React and JavaScript: Clearing fields upon successful sign up and redirecting to login page after receiving a 200 status code

Adding a layer of middleware (insights) to enhance the functionality of Instantsearch in

Is it possible to implement a while loop in React?

What is the best way to trigger a JavaScript onclick event for a button that is located within a dropdown menu on an HTML page

Default cursor for Internet Explorer: automatic

Issues with scrolling, styling in css, and Vue challenges