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.
Why is not the style I tried to overwrite affecting either component?
That I've tried
Thank you
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>
}
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.