1

So my question really isn't should I, but rather can I.

If I opt to use styled components for my more common components then I style them once and export.

const MyBlueButton = styled('button')({
  backgroundColor: 'blue'
})

Great export that and I have a blue button.

I can also use sx

const MyBlueButton = (props) => {
  return <button sx={{backgroundColor: 'blue'}}>{props.children}</button>
}

My question is can I have both, one where I've already made my common component but then want to customize it just a bit unique for one use.

'components/buttons.jsx':

export const MyBlueButton = styled('button')({
  backgroundColor: 'blue'
})

--------

'FooBar.jsx':
import {MyBlueButton} from 'components/buttons'

const FooBar = (props) => {
  return (
    <div>
      <p>Some text</p>
      <MyBlueButton sx={{fontSize: '20px'}}>Large Blue Button</MyBlueButton>
    </div>
  )
}

I didn't find anything stating that you couldn't do it. I'm sure you quite possibly can, but can you, and what would be the expected order of css properties?

If I have a styled component with a matching css property in the sx prop would sx win since it's closer to the render? Should I have to worry about injection order with the StyledEngineProvider?

I'm really just hoping I can use a healthy mix of both styled components and one off sx modifications.

JeffBaumgardt
  • 1,378
  • 3
  • 16
  • 24

2 Answers2

1

I went ahead and made a codesand box to test my idea and it does work to combine both styled wrappers and sx props.

Again probably not for everyday use, but it's nice to know it is possible.

CodeSandbox: https://codesandbox.io/s/keen-roman-s6i7l?file=/src/App.tsx

JeffBaumgardt
  • 1,378
  • 3
  • 16
  • 24
0

I have been into such issue; the way I had to implement the sx props to be passed before passing the component to styled engine was neglecting the props:

const AutoComplete = withThemeProvider(styled(Autocomplete)(autoCompleteStyles));

and when to use it, it gets neglected <Autocomplete sx={neglectedProps}>

Ahmad Barghouthi
  • 1