Setting React component props in a Styled Component

Question

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?

Avinash Thakur · Accepted Answer · 2021-07-04 19:45:43Z

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.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" />

answered Jul 4, 2021 at 19:45

Avinash Thakur

2,1991 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sharkk22 Over a year ago

This is it. In my case, I wasn't relying on props, just a hard-coded value, so my component looked like... styled(MUICircularProgress).attrs({size: 90}). Thanks!

Areeb Khan · Accepted Answer · 2021-07-04 19:19:12Z

1

You simply pass a prop size to the component created using styled-components. 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-components official documentation

answered Jul 4, 2021 at 19:19

Areeb Khan

4233 silver badges11 bronze badges

1 Comment

Vitaliy Terziev Over a year ago

this one is actually simpler than the accepted answers, not sure why this was skipped

Collectives™ on Stack Overflow

Setting React component props in a Styled Component

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related