javascript - 在 Styled Component 中设置 React component props

Question

我正在使用样式化组件来增强一些基本 Material -ui React 组件的外观。我希望能够将 Prop 传递到 MUI 组件，然后通过样式化组件应用 CSS 样式。

如您所见，您可以通过带样式的组件更改项目的颜色。

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

但是，如果我想让项目变大，我需要将 size 作为 Props 传递给 MUICircularProgess

如何做到这一点，这是否可能？

如果不是，有哪些可能的解决方法？

Answer 1

您可以使用 .attr(...) 构造函数来自定义传递的 Prop 。您的代码可能需要更新为类似这样的内容

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

更多引用，查看官方文档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/react-is@17.0.2/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" />