styled-components：使用额外的样式扩展现有组件

Question

我正在使用 styled-components 来覆盖现有组件的样式，在这种情况下ToggleButton来自材料 ui。但是我希望我的新组件有一个额外的属性 ( hasMargin) 来控制样式：

import {ToggleButton} from "@material-ui/lab";
import styled, {css} from "styled-components";

const StyledToggleButton = styled(ToggleButton)<{ hasMargin?: boolean }>`
  && {
    color: red;

    ${props => props.hasMargin &&
      css`
          margin: 10px;
      `}
   }
`;

我的意图是它的StyledToggleButton行为完全相同，ToggleButton但具有红色，并且可以使用附加属性调用hasMargin以打开边距 css。我想这样称呼它：

    <StyledToggleButton
      value={""} // ToggleButton prop
      size={"small"} // ToggleButton prop
      hasMargin={true} // My prop from StyledToggleButton
    >
      click
    </StyledToggleButton>

但是如果我这样做，在浏览器控制台中我会得到：

Warning: React does not recognize the `hasMargin` prop on a DOM element.

这是因为，StyledToggleButton似乎还通过hasMargin进一步ToggleButton和ToggleButton当然可以而且应该不会与不处理的（向下传递到它是没有意义的DOM元素）。重写我的代码的最佳方法是什么，所以hasMargin只由StyledToggleButton?

我制作了一个代码沙盒来说明这个问题。谢谢！

Answer 1

这正是瞬态道具的用途。

您需要做的就是在 prop 前面加上 a$并且styled-components不会将 prop 传递给底层 DOM 元素。

// Note the $ prefix in the prop name             
const StyledToggleButton = styled(ToggleButton)<{ $hasMargin?: boolean }>`
  && {
    color: red;

    // Just use the prop as normal
    ${(props) =>
      props.$hasMargin &&
      css`
        margin: 10px;
      `}
  }
`;

<StyledToggleButton
  value={""}
  size={"small"}
  {/* Assign the prop as normal */}
  $hasMargin={true}
>
  click
</StyledToggleButton>;

这是您更新的 Codesandbox 链接，该错误消失了。