Reactjs 样式化组件：使用用于样式化的附加道具扩展现有组件

我正在使用样式化组件覆盖现有组件的样式，在本例中，是材质ui中的

ToggleButton

。但是，我希望我的新组件具有一个控制样式的附加属性（

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;
      `}
   }
`;

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

警告：React无法识别DOM元素上的'hasMargin'属性。

这是因为

StyledToggleButton

似乎还将

hasMargin

进一步传递给

ToggleButton

，而

ToggleButton

当然不能也不应该处理这一点（将其传递给没有意义的DOM元素）。重写代码的最佳方法是什么，因此

hasMargin

仅由

StyledToggleButton

处理

---

我已经做了一个例子来说明这个问题。谢谢大家!

用span包装ToggleButton并从中应用样式怎么样

const StyledToggleButton = styled.span<{ hasMargin?: boolean }>`
  margin: ${props => props.hasMargin && '50px'};
  
  button {
    color: red !important;
  }  
`

interface MyButtonProps extends ToggleButtonProps {
  hasMargin?: boolean;
}

function MyButton(props: MyButtonProps) {
  const { hasMargin, ...toggleButtonProps } = props;

  return (
    <StyledToggleButton hasMargin={hasMargin} >
      <ToggleButton {...toggleButtonProps}>
      {props.children}
      </ToggleButton>
    </StyledToggleButton>
  );
}

export default function App() {
  return (
    <div className="App">
      <MyButton value={""}>click</MyButton>

      <MyButton value={""} size={"small"} hasMargin={true}>
        click
      </MyButton>
    </div>
  );
}

const StyledToggleButton=styled.span`
边距：${props=>props.hasMargin&&50px}；
钮扣{
颜色：红色！重要；
}  
`
接口MyButtonProps扩展ToggleButtonProps{
hasMargin？：布尔值；
}
功能MyButton（道具：MyButtonProps）{
const{hasMargin，…toggleButtonProps}=props；
返回(
{props.children}
);
}
导出默认函数App（）{
返回(
点击
点击
);
}

用span包装ToggleButton并从中应用样式怎么样

const StyledToggleButton = styled.span<{ hasMargin?: boolean }>`
  margin: ${props => props.hasMargin && '50px'};
  
  button {
    color: red !important;
  }  
`

interface MyButtonProps extends ToggleButtonProps {
  hasMargin?: boolean;
}

function MyButton(props: MyButtonProps) {
  const { hasMargin, ...toggleButtonProps } = props;

  return (
    <StyledToggleButton hasMargin={hasMargin} >
      <ToggleButton {...toggleButtonProps}>
      {props.children}
      </ToggleButton>
    </StyledToggleButton>
  );
}

export default function App() {
  return (
    <div className="App">
      <MyButton value={""}>click</MyButton>

      <MyButton value={""} size={"small"} hasMargin={true}>
        click
      </MyButton>
    </div>
  );
}

const StyledToggleButton=styled.span`
边距：${props=>props.hasMargin&&50px}；
钮扣{
颜色：红色！重要；
}  
`
接口MyButtonProps扩展ToggleButtonProps{
hasMargin？：布尔值；
}
功能MyButton（道具：MyButtonProps）{
const{hasMargin，…toggleButtonProps}=props；
返回(
{props.children}
);
}
导出默认函数App（）{
返回(
点击
点击
);
}

这正是我们的目的

您所需要做的就是在prop前面加上

$

，而

样式化组件将不会将prop传递给底层DOM元素

//注意道具名称中的$prefix这正是它的用途

您所需要做的就是在prop前面加上
$
，而
样式化组件将不会将prop传递给底层DOM元素

//请注意道具名称中的$prefix，谢谢，对于这个简单的示例，这将是一个选项。但我真的想知道如何直接覆盖切换按钮。在我真正的项目中，is远不止是marginThanks，对于这个简单的例子来说，这将是一个选项。但我真的想知道如何直接覆盖切换按钮。在我真正的项目是远远不止marginGreat，谢谢！这正是我需要的，谢谢！这正是我需要的