О стилизации компонентов класса с использованием стилевых компонентов React

Question

стайлинг компонентов с использованием стилевых компонентов React. Компоненты имеют дело с компонентами класса. Я хотел бы использовать компоненты (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")
);

Componenta

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

componentB

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

Запуск приведенного выше кода будет выглядеть, как показано на скриншоте ниже.

результат выполнения вышеуказанного кода

Но я хочу, чтобы это было так.

Я хочу, чтобы это было так

Почему стиль, который я пытался перезаписать, не влияет ни на один из компонентов?

что я пробовал

• Пусть componentA, componentB будет функциональным компонентом
• Присвойте className элементу Icon компонента A и укажите стиль для className в стиле
• Прочитать документ по стил-компонентам

Спасибо

Answer 1

Из ответа Пунит Махендры я отредактировал каждый файл следующим образом и реализовал перезапись стиля.

Если вы обнаружите ошибку в написанном мною коде, сообщите мне об этом в комментариях.

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;

Componenta

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;

componentB

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;

Большое спасибо.

Answer 2

Вы можете изменить стиль 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>
  }
}