Styled-system: Override defaultProps?

[kevinSuttle]

// Flexbox.jsx
import styled from '@emotion/styled';
import {flexbox} from 'styled-system';
import shouldForwardProp from '@styled-system/should-forward-prop';

import {Box} from './Box';

export const Flexbox = styled(Box, {
  shouldForwardProp,
})(
  {
    label: 'flexbox',
    display: 'flex',
  },
  flexbox
);

Now, display cannot be overridden. Am I missing something? Shouldn't display be allowed to be overridden based on https://styled-system.com/guides/default-values ?

[jxnblk]

In your example, you've hard-coded display: 'flex', but I don't see defaultProps anywhere. Did you mean to set Flexbox.defaultProps.display = 'flex'?

[kevinSuttle]

Ah, I think it's maybe my conflation of defaultProps and the inline style props set here that is tripping me up.

[jxnblk]

If what you're trying to do is still allow the display prop from Box (assuming you added that to Box) to be available, you can either add React default props like this:

Flex.defaultProps = {
  display: 'flex',
}

Or be sure to include the layout.display function after the hard-coded display style.

const Flex = styled(Box, { shouldForwardProp })(
  {
    label: 'flexbox',
    display: 'flex',
  },
  layout.display,
  flexbox
);

Due to how the cascade (i.e. source order) works in CSS, I'm guessing the Box component's display property is being overridden by the styles you have in the Flex component

[kevinSuttle]

That makes so much sense. Thanks @jxnblk!