From 8c150ec804e41e3d3a20ac8e54705e88e47109b7 Mon Sep 17 00:00:00 2001 From: Chris Sandvik Date: Thu, 24 Feb 2022 16:06:43 -0500 Subject: [PATCH 1/2] Allow `styles` prop to be forwarded in order to style the `MenuPortal` Add documentation for styling the `MenuPortal` --- README.md | 53 ++++++++++++++++++++++++++++++++-- src/use-chakra-select-props.ts | 1 - 2 files changed, 51 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b170896..ec4bb0a 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,8 @@ Check out the demos here: - [`isFixed`](#isfixed) - [Styling](#styling) - [`chakraStyles`](#chakrastyles) + - [Caveats](#caveats) + - [Examples](#examples) - [Theme Styles](#theme-styles) - [`className`](#classname) - [TypeScript Support](#typescript-support) @@ -248,8 +250,6 @@ This package does however offer an alternative to the `styles` prop, `chakraStyl In order to use the `chakraStyles` prop, first check the documentation for [the original `styles` prop from the react-select docs](https://react-select.com/styles#style-object). This package offers an identical API for the `chakraStyles` prop, however the `provided` and output style objects use [Chakra's `sx` prop](https://chakra-ui.com/docs/features/the-sx-prop) instead of the default emotion styles the original package offers. This allows you to both use the shorthand styling props you'd normally use to style Chakra components, as well as tokens from your theme such as named colors. -The one difference between the keys in this style object and the original, is that in the original the `input` styles apply to a container surrounding the html `` element, and there was no key for styling the input itself. With this styles object, the `input` key now styles the actual `` element and there is a new key, `inputContainer`, that styles the surrounding `Box`. Both functions use the `state` argument for the original `input` key. - The API for an individual style function looks like this: ```js @@ -307,10 +307,59 @@ const App: React.FC = () => { w: "40px", }), }; + return ` element, and there is no key for styling the input itself. With the `chakraStyles` object, the `input` key now styles the actual `` element and there is a new key, `inputContainer`, that styles the surrounding `Box`. Both functions use the `state` argument for the original `input` key. + +Additionally, there is one key that is available in the `styles` prop that does not exist in the `chakraStyles` object; `menuPortal`. This key applies to the `MenuPortal` element which is only used when the [`menuPortalTarget`](https://react-select.com/advanced#portaling) prop is passed in. This component is replaceable, however it is very tightly integrated with the menu placement logic (and a context provider) so it appears to be impossible to fully replace it with a chakra component. And in turn, it can't pull a key from the `chakraStyles` prop. Therefor, if you are passing the `menuPortalTarget` prop and would like to change the styles of the `MenuPortal` component, you have two options: + +1. Pass the original `styles` prop with the `menuPortal` key. This is the only key in the `styles` object that will be applied to your components. + +```jsx +return ( + +) +``` + +```css +/* styles.css */ + +.chakra-react-select__menu-portal { + z-index: 100; +} +``` + +If anyone has any suggestions for how to fully replace the `MenuPortal` component, please leave a comment on [this issue](https://github.com/csandman/chakra-react-select/issues/55) or submit a pull request. + +#### Examples + - Dropdown menu attached to control example: - TypeScript: https://codesandbox.io/s/chakra-react-select-chakrastyles-5yh6q?file=/app.tsx - Vanilla JS: https://codesandbox.io/s/chakra-react-select-chakrastyles-vanilla-kgdnf?file=/example.js diff --git a/src/use-chakra-select-props.ts b/src/use-chakra-select-props.ts index 9342bc8..c59a353 100644 --- a/src/use-chakra-select-props.ts +++ b/src/use-chakra-select-props.ts @@ -8,7 +8,6 @@ const useChakraSelectProps = < IsMulti extends boolean = false, Group extends GroupBase