I added a custom style called states. It is supposed to handle custom states like error, disabled, success etc.
When adding those, and there are a couple of default stylings already added to the component, they won't take effect, as they are overwritten.
To Reproduce
Here is how I created those custom states:
export type State = 'error' | 'success' | 'disabled';
interface StateProps<T extends ITheme = Theme> {
'data-state'?: State;
state?: State;
states?: { [key in State]?: BaseProps<T> };
}
const state = createStyleGenerator<StateProps>({
getStyle: ({ state, states, theme }) => {
const style = state ? states?.[state] : undefined;
return base({
...style,
theme
});
},
props: ['state']
});
export const system = compose<SystemProps>(base, state);
export const { x } = createCss(system);
π Bug Report
I added a custom style called
states
. It is supposed to handle custom states like error, disabled, success etc. When adding those, and there are a couple of default stylings already added to the component, they won't take effect, as they are overwritten.To Reproduce
Here is how I created those custom
states
:Component with default-props:
What's important here is
states.error.borderColor
.Expected behavior
Render component with error-border
Link to repl or repo (highly encouraged)
https://codesandbox.io/s/quiet-firefly-i1g68?file=/src/App.tsx
Component1
works fine.Component2
will not render thestate.error.borderColor
, instead it will render the default border.Run
npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard