无法在 styled-component 中扩展 React 组件

huangapple
go评论106阅读模式
英文:

Unable to extend react component in styled-component

问题

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

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

  1. import styled from "styled-components";
  3. const Button = styled.button`
  4.   background: ${props => props.primary ? "palevioletred" : "white"};
  5.   color: ${props => props.primary ? "white" : "palevioletred"};
  7.   font-size: 1em;
  8.   margin: 1em;
  9.   padding: 0.25em 1em;
  10.   border: 2px solid palevioletred;
  11.   border-radius: 3px;
  12. `;
  14. export const NewButton = ({ className, children }) => {
  15.     return (
  16.         <Button primary>Primary</Button>
  17.     )
  18. }

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

  1. import styled from "styled-components";
  2. import { NewButton } from './button';
  4. const ButtonWrapper = styled(NewButton)`
  5.   width: 100%;
  6.   color: red;
  7. `;
  9. export const ExtendedButton = ({ className, children }) => {
  10.     return (
  11.         <ButtonWrapper />
  12.     )
  13. }

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

英文:

I am trying to extent react component in styled-component and trying to add custom style on extended component but unable to see the style changes that I am applying

I have created a button component in /src/newbutton.js with following code

  1. import styled from &quot;styled-components&quot;;
  3. const Button = styled.button`
  4.   background: ${props =&gt; props.primary ? &quot;palevioletred&quot; : &quot;white&quot;};
  5.   color: ${props =&gt; props.primary ? &quot;white&quot; : &quot;palevioletred&quot;};
  7.   font-size: 1em;
  8.   margin: 1em;
  9.   padding: 0.25em 1em;
  10.   border: 2px solid palevioletred;
  11.   border-radius: 3px;
  12. `;
  14. export const NewButton = ({ className, children }) =&gt; {
  15.     return (
  16.         &lt;Button primary&gt;Primary&lt;/Button&gt;
  17.     )
  18. }

And extending and creating another button component with custom style in /src/custom-button.js with following code

  1. import styled from &quot;styled-components&quot;;
  2. import { NewButton } from &#39;./button&#39;
  4. const ButtonWrapper = styled(NewButton)`
  5.   width: 100%;
  6.   color: red
  7. `;
  9. const ExtendedButton = ({ className, children }) =&gt; {
  10.     return (
  11.         &lt;ButtonWrapper /&gt;
  12.     )
  13. }

I have added the custom style like width: 100% & color: red but it is not applying on ExtendedButton. Infect colour and width is same as NewButton

答案1

得分: 1

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

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

  1. export const NewButton = ({ className, children }) => {
  2.     return (
  3.         <Button className={className} primary>Primary</Button>
  4.     )
  5. }
英文:

You need to pass a className to your NewButton in order to customize it, using styled-components.

Styled components works by creating a unique className that associated with a component and its CSS.

  1. export const NewButton = ({ className, children }) =&gt; {
  2.     return (
  3.         &lt;Button className={className} primary&gt;Primary&lt;/Button&gt;
  4.     )
  5. }

答案2

得分: 0

  1. 我正在发布完整的工作代码以供将来参考，基于 @Flat Globe 的解决方案。它按预期运行良好。
  3. 我已经通过在 `/src/newbutton.js` 中添加 `className` 修改了按钮组件代码，代码如下：
  5. ```jsx
  6. import styled from "styled-components";
  8. const Button = styled.button`
  9.   background: ${props => props.primary ? "palevioletred" : "white"};
  10.   color: ${props => props.primary ? "white" : "palevioletred"};
  12.   font-size: 1em;
  13.   margin: 1em;
  14.   padding: 0.25em 1em;
  15.   border: 2px solid palevioletred;
  16.   border-radius: 3px;
  17. `;
  19. export const NewButton = ({ className, children }) => {
  20.     return (
  21.         <Button primary className={className}>Primary</Button>
  22.     )
  23. }

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

  1. import styled from "styled-components";
  2. import { NewButton } from './button'
  4. const ButtonWrapper = styled(NewButton)`
  5.   width: 100%;
  6.   color: red
  7. `;
  9. const ExtendedButton = ({ className, children }) => {
  10.     return (
  11.         <ButtonWrapper className="extended-button"/>
  12.     )
  13. }
  2. <details>
  3. <summary>英文:</summary>
  5. I am posting the complete working code for future reference based on @Flat Globe solution. And it is working fine as expected.
  7. 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>
)
}

  1. 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"/>
)
}

  2. </details>

huangapple
  • 本文由 发表于 2023年2月19日 01:47:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/75495250.html
  • css
  • javascript
  • reactjs
  • styled-components
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定