styled-components / xstyled

A utility-first CSS-in-JS framework built for React. πŸ’…πŸ‘©β€πŸŽ€βš‘οΈ
https://xstyled.dev
MIT License
2.27k stars 107 forks source link

Custom stylings will be overwritten by default props #330

Open misantronic opened 2 years ago

misantronic commented 2 years ago

πŸ› 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:

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);

Component with default-props:

const MyComponent = () => <div/>;

MyComponent.defaultProps = {
  {
    borderBottom: '2px solid',
    borderColor: {
        _: 'soft-100',
        hover: 'action-100',
        focus: 'action-130'
    },
    states: {
        error: {
            borderColor: 'error-100'
        }
    }
  }
}

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 the state.error.borderColor, instead it will render the default border.

Run npx envinfo --system --binaries --npmPackages @xstyled/system,@xstyled/styled-components,styled-components --markdown --clipboard

## System:
 - OS: macOS 11.6
 - CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
 - Memory: 412.03 MB / 32.00 GB
 - Shell: 5.8 - /bin/zsh
## Binaries:
 - Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
 - Yarn: 3.1.0 - ~/.yarn/bin/yarn
 - npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm