Styling Your React Component

There are a lot of ways to style your react component, Here are the list of 5 ways that I compiled :-

1. By creating a new file exclusive for a component and putting all the style in that component, This may leads to some confusion as the files get complex there may be some overlapping components in a page and styling that component differently for specific page may be tedious, but the plus side for this is we can say all the code is modular and css and jsx both are separated by different files
2. By creating a style object and passing that object in the component, this is a widely used approach and also being encouraged by many companies, but the down side for this is we cant use pseudo selector specific css in the react component by this approach,
3. One can create a single CSS file and import that in the main component of the app that will affect the whole dom of the react app , but the CSS in this is a lot messier not easy to maintain and headache for future programmers to come
4. As we create a component in react we can also styled those component by defining style in the components, There is a npm library that can be used for styling in this specific way , the library name is styled-components

npm install --save styled-components
// Create a Title component that'll render an <h1> tag with some 
styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: red;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: blue;
`;
// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

There is no problem in styling component like this, the only problem with this is It is complex to understand

5. One can style there component within jsx by adding a style tag within the jsx and that will be responsible for styling the whole component. Just install styled-jsx npm dependency.
here is how

import Select from 'react-select'
export default () => (
  <div>
    <Select className="react-select" />

    <style jsx>{`
      /* "div" will be prefixed, but ".react-select" won't */
      div .react-select{
        color: red
      }
    `}</style>
  </div>
)

These are some of the ways that one can style their react app,

If you like this article please leave claps to boost my morale XD, If you have any doubts comment on this article or contact me on the following medium

Contact : LinkedIn, Facebook, GitHub, Stack Overflow, Portfolio

Till next time until then ,Adiós amigo