Override existing styles using styled system

Question

I have this existing UI components has built with styled-component.(https://styled-components.com/)

Now I want to overrides existing styles by using Styled System (https://styled-system.com/) so I can style with style props,

Here is what I did so far :

Created a Box component as below

import styled from 'styled-components';
import { space, color, layout, flexbox, background } from 'styled-system';
import shouldForwardProp from '@styled-system/should-forward-prop';

const Box = styled('div', { shouldForwardProp })(
  {
    boxSizing: 'border-box',
    minWidth: 0,
  },
  space,
  color,
  layout,
  flexbox,
  background
);

Replace div element with new Created Box component

AlertBox (Existing UI component) :

import styled from 'styled-components';
import Box from './component/Box'; // my new changes

const AlertBox = styled(Box)( // replace div with Box
  color: '#fff'
);

<AlertBox color="#006699"/>

My problem is the color of component is still #fff. Not #006699

How can I make my component get override using newly created Box component ?

Please help me here

Override existing styles using styled system

0 Answers0