How to apply CSS to AutoComplete' List from rsuite component

Question

I'm tryin to apply style to the list of this component from Rsuite:

I wanna set a max-height, and overflow.

At the moment I tried to set style={{maxHeight: 150px}} but it applies to the InputContainer not the List.

5eb · Answer 1 · 2021-01-30T16:08:07.743

1

You can target the popup list via css using the div.rs-picker-menu selector:

div.rs-picker-menu {
  max-height: 150px;
  overflow: scroll;
}

edited Jan 30 '21 at 16:08

answered Jan 30 '21 at 11:19

5eb

thnks, but it didnt work. im using styled-components to css components I tryied the following code.. const Autocomplete = styled(AutoComplete)` .rs-picker-menu { background-color: red; color: red; } ` just to let u know, i set color to see if it works propertly. – Nehlk Jan 30 '21 at 15:20
You didn't mention you were using styled components. If you look at my sandbox you see it does work using regular css. You can just add the css I posted in a css file and include that. – 5eb Jan 30 '21 at 15:54
@Nehlk I wouldn't recommend trying to style this using the styled components, because `rs-picker-menu` is rendered outside the entry point `root` div scope (This is probably done using [React portals](https://reactjs.org/docs/portals.html)). Instead it's easier to target it using regular css as I mentioned in my previous comment. – 5eb Jan 30 '21 at 16:04
Thnk y so much. It worked without styled-components !! – Nehlk Jan 30 '21 at 18:47
@Nehlk Glad to help. If this solved the problem be sure to upvote and accept the answer to show the answer resolved your issue. – 5eb Jan 30 '21 at 18:55

1 Answers1