Home>

React beginner.
We use components of React styled-components for styling.
ocmponents deals with class components,
I would like to use components with other components for further styling.
I do n’t know how to do this, so I ’d like to know. . .

Error message

1. Introducing styled-components to class components and styling components
2. Export components so that they can be used with other components
3. In other components, import the components created above
4. Try to add more styles to the imported component.
=>Style does not work

Applicable source code

componentA,
The other components described in 3 arecompoentB.
* Only the minimum items are listed for explanation

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

-I checked whether componentA and componentB could be realized as functional components, but the results did not change
・ If className is assigned to the "Icon" element of componentA and style is specified for className in styled, the result will not change.
・ I checked various other materials, but I couldn't find what I wanted to do. . .

Reference (some pickups)
https://www.styled-components.com/docs/
https://qiita.com/kiida/items/ceac662d9a8bdd960499#override%E3%81%99%E3%82%8B
https://qiita.com/taneba/items/4547830b461d11a69a20

Supplemental information (FW/tool version etc.)

・ React 16.4.2
・ Styled-components 3.4.2

  • Answer # 1

    Assuming index.js is like this

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

    Prepare something like this

    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;
    import React from "react";
    import styled from "styled-components";
    const Icon = styled.img`
            width: 100px;
            height: 100px;
        `;
    export default Icon;
    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;
    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;

    Isn't it good if I just want to see it?

Related articles