在样式化组件中设置 React 组件道具

Posted 2023-03-15

【中文标题】在样式化组件中设置 React 组件道具

【英文标题】：Setting React component props in a Styled Component

【发布时间】：2021-09-15 18:03:03

【问题描述】：

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

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

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

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

如何做到这一点，这甚至可能吗？

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

【参考方案1】：

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

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

【讨论】：

就是这样。就我而言，我不依赖于道具，只是一个硬编码的值，所以我的组件看起来像... styled(MUICircularProgress).attrs(size: 90)。谢谢！

【参考方案2】：

您只需将一个 prop size 传递给使用 styled-components 创建的组件。例如，

<LoadingIcon size=14 />

这为您的 LoadingIcon 提供了一个 size 的道具，其值为 14。要使用它，

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