使用 Typescript 将 props 传递给由 styled-components 包装的 material-ui 按钮

Posted 2023-03-15

【中文标题】使用 Typescript 将 props 传递给由 styled-components 包装的 material-ui 按钮

【英文标题】：Passing props to material-ui button wrapped by styled-components with Typescript

【发布时间】：2021-10-13 02:49:03

【问题描述】：

我使用 typescript 模板创建了 react 项目，并使用 styled-components 库中的 styled 方法设置了 Material-ui Button 组件的样式，如下所示：

import React from 'react';
import styled from 'styled-components';
import Button, ButtonProps from "@material-ui/core/Button";

type StyledButtonProps = ButtonProps &  primary?: boolean 


const styledButton = styled(Button)`
  background-color: $(props: StyledButtonProps) => props.primary ? "palevioletred" : "white";
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 7px 14px;

  &:hover 
    background-color: aqua;
  

  & .MuiButton-label 
    color: #070303;
  
` as React.ComponentType<StyledButtonProps>

export default styledButton;

我正在尝试传递确定颜色的主要布尔值。它通常可以工作，但是当我尝试使用如下所示的样式按钮时会出现警告消息：

<StyledButton primary=true>Styled Buton</StyledButton>

警告信息是：

这是为什么呢？我怎样才能摆脱这个警告？

【参考方案1】：

Styled-components 尝试将 primary=true 传递给 DOM，但 DOM 只接受字符串值 primary="true"。因此，它会警告您将true 更改为"true"，以便它可以成功呈现到DOM。

如果我们将primary=true 更改为primary="true"，则主要属性将显示在 DOM 上，如下所示：

---

但我认为您不希望 primary 被渲染到 DOM，所以

使用 Transient 道具消除警告：

美元符号 ($) 前缀有助于样式组件避免将该属性传递给 DOM。 Read this for details

<StyledButton $primary=true>Styled Buton</StyledButton>

...

background-color: $(props: StyledButtonProps) =>
    props.$primary ? "palevioletred" : "white";
...

这里是codesandbox for demo。