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

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

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?

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

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

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?

• javascript
• reactjs
• material-ui
• styled-ponents

Share Improve this question Follow asked Jul 4, 2021 at 19:01 sharkk22sharkk22 43355 silver badges88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg./[email protected]/umd/react-is.production.min.js"></script>
<script src="https://unpkg./styled-ponents/dist/styled-ponents.min.js"></script>
<script src="https://unpkg./@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>

<div id="root" />

You simply pass a prop size to the ponent created using styled-ponents. e.g.,

<LoadingIcon size={14} />

This gives your LoadingIcon a prop of size whose value is 14. To use it,

export const LoadingIcon = styled(MUICircularProgess)`
  color:black;
  height: ${props => props.size || 10} //Apply it to any CSS property you like. I like to keep a fallback value, hence the || 10
`

Source: styled-ponents official documentation