Style React components like a pro 🔥
React is awesome the way react works under the hood is magic, a developer can create an awesome user interface using react, also the tons of packages written in react further makes the life of react developer easy, one can directly do npm install <their fav library> and start using components from the library.
But wait here is catch! sometimes styling of 3rd party library components could be a nightmare for developers but as you know problems are meant to be solved so here is an npm package named styled-components which is used with react to apply your custom styling to any kind of react component whether it is a component which is written years ago or any 3rd party library component, styled-components can style any type of react component.
How to use styled-components in your project?
1.) npm install — save styled-components
2.) import styled from ‘styled-components’;
now, for example, you want style Header component of your any pre-existing app, so for that, you first have to wrap your component with the styled-component and then override the CSS for the component.
const StyledHeader = styled(Header)`width: 70%;font-size: 18px;padding-top: 0.5rem;padding-bottom: 0.3rem;`;
now use the StyledHeader in place of Header component note:- styled-components automatically exposes your props to the wrapped component so you need not worry about props just write CSS you want to override.
What about 3rd party lib. which were mentioned at the starting of this article?
3rd party components are nothing but are some components written by a 3rd person. styled-component does the same thing with those components too.
const { Button } from 'some-3rd-party-lib';export const StyledButton = styled(Button)`background: #2e4357 ;border: none;box-shadow: none;font-size: 1rem;width: 6rem;height: 2.2rem;`;
in this way, styled-components help to apply custom CSS to 3rd party components too.
Wait there is still more to go……….
with styled-components, you can style your plain HTML elements and share their styling across your app by simply exporting from a common file and importing it in the required file.
export const Custominput = styled.input`width: 70%;box-shadow: none !important;border: 1px solid #cfd3d9 !important;`;
For more information about styled-components please visit this link.
