Is it possible to style content in the placeholder area

[mgpGit-zz]

Version

4.7.2

Here's what went wrong:

When items are selected we would like to style the number of items selected so it jumps out that we are filtering the page.

In the example below when you select items it uses the manySelectedPlaceholder to display the number of items selected. We would like to use some styling to show the number emphasized. Ideally we would like to show the number in a blue circle (with white font).

If not - is it possible that Inline Styles or markup support be used for the placeholder?

Thoughts? Is this possible?

Example

https://codesandbox.io/s/picky-demo-qnnns

[Aidurber]

Hi @mpGitHub The only way I can think to get this to work is to pass a className to buttonProps (see readme).

See my updated example below, if items are selected then we return an object which contains a className.

https://codesandbox.io/s/picky-demo-b6qhu

Excerpt:

 get buttonProps() {
    if (this.state.arrayValue.length > 0) {
      return {
        className: "placeholder--isactive"
      };
    }
  }

 render(){
   return <Picky 
     buttonProps={this.buttonProps}
     // Rest of props
    />
  }

You can also return a style if that's more your thing:

     return {
        style: {
          color: 'blue'
        }
      };