Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select component selected option container cannot by styled via theme

See original GitHub issue

Select component selected option container cannot by styled via theme.

Expected Behavior

Style the background and text color of the selected option container using select.options.container.background.selected, select.options.container.selected.background, select.options.container.selected.color, select.options.container.color.selected, or similar, theme override.

Actual Behavior

Unable to style a selected option using the select.options.container theme override. https://v2.grommet.io/select#select.options.container

URL, screen shot, or Codepen exhibiting the issue

Desired design, mocked up in Figma: Screen Shot 2021-09-13 at 12 09 29 PM

Current design, implemented: Screen Shot 2021-09-10 at 4 13 29 PM

Grommet version: ^2.16.2
Browser Name and version: Google Chrome Version 93.0.4577.63 (Official Build) (x86_64)
Operating System and version (desktop or mobile): macOS Catalina Version 10.15.7

Issue Analytics

State:
Created 2 years ago
Comments:12

Top GitHub Comments

2reactions

jcfilbencommented, Sep 17, 2021

Hi @chrisvalmonte to style the selected option via the theme you can use global.selected.background or global.selected.color. The reason you were unable to style the selected options with select.options.container is because this is for styling that is applied to the entire options container. To style the clear option you can use select.clear.container. Here is a codesandbox demonstrating these props. Let me know if this answers your question.

1reaction

chrisvalmontecommented, Oct 23, 2021

Created PR #5729

Top Results From Across the Web

Styling a Select element from react-select - Stack Overflow

Yes, it is possible to provide your own custom styles, react-select provides an object-based approach for styling the Select component.

Styles - React Select

Overriding the theme. Examples. Styles. React Select offers 3 main APIs for styling: The styles prop; The classNames prop; The classNamePrefix prop ...

Advanced Usage - styled-components

This component provides a theme to all React components underneath itself via the context API. In the render tree all styled-components will have...

Select - Ant Design

Select component to select value from options. When To Use. A dropdown menu for displaying choices - an elegant alternative to the native...

CSS Variables - Vue Select

Vue Select uses custom CSS properties throughout the component to handle visual opinions. This allows for quite a bit of flexibility in styling, ......