问题

我正在尝试在 styled-component 中扩展 React 组件并尝试在扩展的组件上添加自定义样式，但无法看到我所应用的样式更改。

我已经在 /src/newbutton.js 中创建了一个按钮组件，以下是代码示例：

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 (
        <Button primary>Primary</Button>
    )
}

然后，在 /src/custom-button.js 中扩展并创建另一个带有自定义样式的按钮组件，以下是代码示例：

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

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

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

我已经添加了自定义样式，如 width: 100% 和 color: red，但它不会应用于 ExtendedButton。实际上，color 和 width 与 NewButton 相同。

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 (
        <Button primary>Primary</Button>
    )
}

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

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

const ExtendedButton = ({ className, children }) => {
    return (
        <ButtonWrapper />
    )
}

答案1

得分: 1

你需要在你的NewButton中传递一个className来进行定制，使用styled-components。

Styled components通过创建与组件及其CSS相关联的唯一className来工作。

export const NewButton = ({ className, children }) => {
    return (
        <Button className={className} primary>Primary</Button>
    )
}

export const NewButton = ({ className, children }) => {
    return (
        <Button className={className} primary>Primary</Button>
    )
}

答案2

得分: 0

我正在发布完整的工作代码以供将来参考，基于 @Flat Globe 的解决方案。它按预期运行良好。

我已经通过在 `/src/newbutton.js` 中添加 `className` 修改了按钮组件代码，代码如下：

```jsx
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 (
        <Button primary className={className}>Primary</Button>
    )
}

我也通过在 /src/custom-button.js 中传递 className 修改了扩展按钮的代码。请查看下面的完整代码：

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

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

const ExtendedButton = ({ className, children }) => {
    return (
        <ButtonWrapper className="extended-button"/>
    )
}

<details>
<summary>英文:</summary>

I am posting the complete working code for future reference based on @Flat Globe solution. And it is working fine as expected.

I have modified the Button component code just by adding `className` in `/src/newbutton.js` with following code

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 (
<Button primary className={className}>Primary</Button>
)
}

I have also modified the extended-button code by just passing the `className` in `/src/custom-button.js`. check the full code below

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

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

const ExtendedButton = ({ className, children }) => {
return (
<ButtonWrapper className="extended-button"/>
)
}

</details>