关于使用 React styled-components 的 class 组件样式

Question

使用 React 的样式化组件对组件进行样式化。 components 处理 class 个组件。我想将组件（componentA）与不同的组件（componentB）一起使用，并为其添加样式，但我不知道如何实现，所以请告诉我。

index.js

import React from "react";
import ReactDOM from "react-dom";
import ComponentA from "./componentA";
import ComponentB from "./componentB";

ReactDOM.render(
    <div>
        <ComponentA/>
        <ComponentB/>
    </div>,
    document.getElementById("app")
);

组件A

import React, { Component } from "react"
import styled from "styled-components"

const Icon = styled.img`
  width: 180px;
  height: 60px;
`;

class ComponentA extends Component  {
  render() {
    return (
      <div>
        <Icon src="hoge.png" />
      </div>
    );
  }
}

export default styled(ComponentA)``;

组件B

import React from "react";
import styled from "styled-components";
import ComponentA from "./ComponentA";

const RestyleComponentA = styled(ComponentA)`
  width: 360px;
  height: 120px;
`;

export default class ComponentB extends Component {
  render() {
    <div>
      <RestyleComponentA />
    </div>
  }
}

运行上面的代码将如下图所示。

result of execute the above code

但是，我想要这样。

I want this to be like this

为什么我尝试覆盖的样式没有影响任何一个组件？

我试过了

设componentA,componentB为功能组件
为组件 A 的 "Icon element" 提供 className 并在 styled
阅读styled-components文档

谢谢

Answer 1

您可以重新设计 Icon 的样式，而不是 ComponentA。导出图标组件重用

import React from "react";
import styled from "styled-components";
import Icon from "./Icon";

const RestyleIcon = styled(Icon)`
  width: 360px;
  height: 120px;
`;

export default class ComponentB extends Component {
  render() {
    <div>
      <RestyleIcon src="hoge.png" />
    </div>
  }
}

Answer 2

根据Puneet Mahendra的回答，我对每个文件进行了如下编辑，实现了样式覆盖。

如果您发现我写的代码有错误，请在评论中告诉我。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ComponentA from "./componentA";
import ComponentB from "./componentB";

ReactDOM.render(
    <div>
        <ComponentA/>
        <ComponentB/>
    </div>
    , document.getElementById('root')
);

box.js

import React from "react";

class Box extends React.Component {
    render() {
        return (
            <div className="box1">
                <div className="box2">
                    {this.props.children}
                </div>
            </div>
        );
    }
}

export default Box;

icon.js

import styled from "styled-components";

const Icon = styled.img`
        width: 100px;
        height: 100px;
    `;

export default Icon;

组件A

import React from "react";
import Box from "./box";
import Icon from "./icon";

class ComponentA extends React.Component {
    render() {
        return (
            <Box>
                <Icon src="hoge.png"/>
            </Box>
        );
    }
}

export default ComponentA;

组件B

import React from "react";
import styled from "styled-components";
import Icon from "./icon";
import Box from "./box";

const RestyledIcon = styled(Icon)`
width: 200px;
height: 200px;
`;

class ComponentB extends React.Component {
    render() {
        return (
            <Box>
                <RestyledIcon src="hoge.png"/>
            </Box>
        );
    }
}

export default ComponentB;

非常感谢。

关于使用 React styled-components 的 class 组件样式

On styling of class components using React styled-components

javascript

reactjs

styled-components