styled-components扩展React组件自定义样式不生效问题求助

你的问题出在**NewButton组件没有将外部传入的className传递给内部的Button元素**，导致styled-components生成的自定义样式无法作用到实际的按钮DOM节点上。

修复步骤 #

1. 修改NewButton组件，传递className属性 #

在/src/newbutton.js中，将组件接收的className传递给内部的Button：

import styled from "styled-components";

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

export const NewButton = ({ className, children }) => {
    return (
        // 把外部传入的className传递给内部的styled按钮
        <Button className={className} primary>{children || "Primary"}</Button>
    )
}

2. 修正custom-button.js的导入路径与组件逻辑 #

注意你之前的导入路径写错了（./button应为./newbutton），同时确保传递必要的属性：

import styled from "styled-components";
import { NewButton } from './newbutton'

const ButtonWrapper = styled(NewButton)`
  width: 100%;
  color: red;
`;

export const ExtendedButton = ({ className, children }) => {
    return (
        <ButtonWrapper className={className}>{children || "Primary"}</ButtonWrapper>
    )
}

原理说明 #

当用styled(自定义组件)扩展样式时，styled-components会生成一个包含新样式的className，并将其传入自定义组件。只有把这个className传递给组件内部的实际DOM元素（这里是Button），新的样式规则才能覆盖原有样式，最终生效。

内容的提问来源于stack exchange，提问作者Avinash A