[Components/Select] Expose access to container props #706
Assignees
Labels
Comments
|
Thanks for bringing this up! While I'm not entirely sure how this should be implemented, I think the API for this could potentially look something like: <Select
sx={{
// styles for select element
borderRadius: 5,
container: {
// styles for root element
},
arrow: {
// styles for arrow icon go here
}
}}
/> |
|
Can it be implemented something like this? const Select(props) {
<Box sx={{ ...props?.sx?.container }}>
<Box as="select" {...props} />
<DownArrow sx={{ ...props?.sx?.arrow }} />
</Box>
} |
|
This is kinda related: #294 |
Closed
|
Doesn’t fix this issue, but Select now supports custom arrows via #1232 |
Closed
|
how do I include an icon for the option within the select? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is your feature request related to a problem? Please describe.
I'm using the
Selectcomponents and use them inline. When the component width is small, the position of the arrow down is not appropriate anymore. I'd love to have access to the container div to make changes to the overall layout of theSelectcomponent.Describe the solution you'd like
Have a
containerSxprop:Describe alternatives you've considered
Currently, to solve this issue I have to create and maintain my own
InlineSelectcomponent, which is far from ideal.PS: Since we're on the topic of
Select, I just wonder what if users oftheme-uiwant to use a different arrow down icon. It seems like there is not a way to change that. Just wonder what you think about it and if you're open to adding some other prop to expose that functionality.The text was updated successfully, but these errors were encountered: