Practical Example of Using CSS Layer
Join the DZone community and get the full member experience.
Join For Free
Let’s say we are developing a component library.Â
Let’s say we are using React.Â
Let’s say it has a button component.
Conventionally, it will look like this:
// CustomButton.js
import ‘./CustomButton.css’
const CustomButton = ({ children, className = ” }) => {
const customClass = ‘CustomButton’ + className;
return <button className={customClass}>{children}</button>
}
And the styles will look like this:
/* CustomButton.css */
.CustomButton {
background: aquamarine;
padding: 4px 12px;
border: none;
}
// CustomButton.js
import ‘./CustomButton.css’
const CustomButton = ({ children, Component = ‘button’, className = ” }) => {
const customClass = ‘CustomButton’ + className;
return <Component className={customClass}>{children}</Component>
}
const linkCustomButton = (
<CustomButton Component=”a” href=”https://google.com”>
Google.com
</CustomButton>
);