关于使用React样式化组件对类组件进行样式化

Question

styling components using React's styled-components. components deals with class components. I would like to use components (componentA) with different components (componentB) and add styles to it, but I don't know how to achieve this, so please let me know.

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

Running the above code will look like the screenshot shown below.

result of execute the above code

But, I want this to be like this.

I want this to be like this

Why is not the style I tried to overwrite affecting either component?

That I've tried

• Let componentA, componentB be a functional component
• Give className to "Icon element" of component A and specify style for className in styled
• Read the document of styled-components

Thank you

Answer 1

You can restyle Icon, not ComponentA. Export Icon component to be reused

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

From Puneet Mahendra's answer, I edited each file as follows and realized style overwrite.

If you find a mistake in the code I wrote, please let me know in the comments.

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;

Thank you very much.