JedWatson / JedWatson/react-select
Error: `defaultStyles[key] is not a function` when adding a custom key to `styles`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Good day.
I find it very convenient that I can place all the styles for Select component in the separate file and import them:
// index.js
import styles from './styles';
<Select
styles={styles}
// ...
/>
// styles.js
const styles = {
control: (provided, state) => ({
...provided,
// Control custom styles
}),
};
However, I have a fair amount of custom components, and I want them to share the same API for styles that react-select has. For that, I create a custom key in the styles object like so:
const styles = {
control: (provided, state) => ({
...provided,
// Control custom styles
}),
checkbox: (provided, state) => ({
...provided,
// Checkbox custom styles
}),
};
But when I start using that key inside a component, I get this error:
Uncaught TypeError: defaultStyles[key] is not a function
I use it like so:
export const Checkbox = ({ isChecked, isDisabled, ...props }) => {
const { children, className, cx, getStyles, innerProps } = props;
return (
<div
css={getStyles('checkbox', props)}
className={cx(
{
'checkbox': true,
},
className,
)}
>
<IconCheckmark fill={isChecked ? 'white' : 'transparent'} css={{
transition: transition,
}}/>
</div>
);
};
The error is pointing to the line 1055 in the following code snippet:
https://github.com/JedWatson/react-select/blob/ec3bd2eb7f5b10fa6ce3f9cac9d811a46a74f42a/packages/react-select/src/Select.tsx#L1051-L1059
Seems like react-select doesn't expect custom keys in styles parameter.
I've read the docs, and especially the Styles - cx and custom Components section, but that doesn't help to solve the problem.
Is there another way of writing custom styles to match the react-select API?
Thanks in advance.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at packages/react-select/src/Select.tsx around lines 1051-1059 and reproduce the custom checkbox key used with getStyles. Compare that path with the Styles - cx and custom Components documentation; done means the documented styling API handles the reported custom component case without the TypeError.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100