For example you want to create completely different parts which have related type attributes however not the identical. Conventional approach to do that in CSS is to create a category and provides that class to your parts. You then create completely different lessons, for the completely different attributes.
It is going to appear like the instance beneath;
types.css
.field {
show: flex;
align-items: middle;
justify-content: middle;
width: 80px;
top: 80px;
border: 2px strong inexperienced;
border-radius: 6px;
}
.first-box {
shade: crimson;
}
.second-box {
shade: blue;
}
part.tsx
import React, { Element } from 'react';
import './types.css';
class Element extends Element {
render() {
return (
<div>
<div className="field first-box">
<span>first field</span>
</div>
<div className="field second-box">
<span>second field</span>
</div>
</div>
);
}
}
And the output;
Now I’ll present you two other ways to realize the identical purpose utilizing styled-components.
- Utilizing css“ markup
- Inheriting one other styled part
1. Utilizing css“ markup
On this instance, we’ll save the shared piece of css values in a variable, and use that variable whereas we’re creating the opposite elements.
part.tsx
import React, { Element } from 'react';
import styled, { css } from 'styled-components';
const boxCss = css`
show: flex;
align-items: middle;
justify-content: middle;
width: 80px;
top: 80px;
border: 2px strong inexperienced;
border-radius: 6px;
`;
const FirstBox = styled.div`
${boxCss}
shade: crimson;
`;
const SecondBox = styled.div`
${boxCss}
shade: blue;
`;
class App extends Element {
render() {
return (
<div>
<FirstBox>
<span>first field</span>
</FirstBox>
<SecondBox>
<span>second field</span>
</SecondBox>
</div>
);
}
}
And we have now the identical visible end result.
As you’ll be able to see, we save the piece of css markup that we wish to share in a variable, and use it as a textual content inside styled part definition.
2. Inheriting one other styled part
On this instance, we’re going to create a part named that may have the shared attributes, and we’ll inherit this part whereas creating the opposite elements.
part.tsx
import React, { Element } from 'react';
import ReactDOM from 'react-dom';
import styled, { css } from 'styled-components';
const Field = styled.div`
show: flex;
align-items: middle;
justify-content: middle;
width: 80px;
top: 80px;
border: 2px strong inexperienced;
border-radius: 6px;
`;
const FirstBox = styled(Field)`
shade: crimson;
`;
const SecondBox = styled(Field)`
shade: blue;
`;
class App extends Element {
render() {
return (
<div>
<FirstBox>
<span>first field</span>
</FirstBox>
<SecondBox>
<span>second field</span>
</SecondBox>
</div>
);
}
}
As you’ll be able to see, we nonetheless have the identical end result. 
I hope you preferred it and it was helpful for you. Thanks for studying.
You may observe me on LinkedIn for extra content material associated to internet improvement.
