Question

95

Setting React component props in a Styled Component

rated 0 times [ 101] [ 6] / answers: 1 / hits: 5524 / 3 Years ago, sun, july 4, 2021, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maya

Add To Favorites

Follow

Total Points: 418

Total Questions: 116

Total Answers: 112

Location: Mauritania

Member since Sun, Oct 17, 2021

3 Years ago

maya questions

1 Dotenv unable to overwrite key value pair

Tue, Dec 22, 20, 00:00, 4 Years ago

1 Tracking with the new Google Analytics 4 (GA4) server-side

Fri, Nov 6, 20, 00:00, 4 Years ago

1 Discord.js - How do you log role changes?

Wed, Jul 29, 20, 00:00, 4 Years ago

1 How to change background color of button using react

Tue, Apr 21, 20, 00:00, 4 Years ago

1 View source not displaying dynamic content

Tue, Apr 7, 20, 00:00, 4 Years ago

View All

answered 3 Years ago antoinette · Accepted Answer

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