Search code examples
javascriptreactjsmaterial-uistyled-components

Setting React component props in a Styled Component

I am using styled components to enhance the looks of some of the basic material-ui React components. I want to be able to pass props into the MUI component, and then apply CSS styling via styled components.

As you can see, you are able to change the color of the item through styled components.

import MUICircularProgress from "@material-ui/core/CircularProgess"
    
export const LoadingIcon = styled(MUICircularProgess)`
  color:black;
`

However, if I want to make the item larger, I need to pass size as Props to MUICircularProgess

How would one do this and is this is even possible?

If not, what are some possible workarounds?

Solution

  • You can use .attr(...) constructor to customize props being passed. Your code might need to be updated to something like this

    import MUICircularProgress from "@material-ui/core/CircularProgess"
    
export const LoadingIcon = styled(MUICircularProgess).attr(props => ({
  size: '5rem', // or, size: props.size
}))`
  color:black;
`

    For more reference, check official documentation Attaching additional props

    const {
  CircularProgress
} = MaterialUI

const Loader = styled(CircularProgress).attrs(props => ({
  size: '5rem',
}))
`
  color: black !important;
`

ReactDOM.render( <Loader /> , document.querySelector('#root'))
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>

<div id="root" />