Implementing styled components with React

Before getting started applying styled components, let me tell you the problem I tried to solve; I wanted to retain the original look and feel of material UI components whilst adding my custom styles to it, for example color and size. Todo this, we need to include material UI’s theme feature which specifies the default style rules of the MUI components, such as color, level of shadow,ripple effect etc…The theme enables us to create a pretty good base for our styling.
Steps to take

• Install the package by typing this code on terminal:

 * npm install--save styled-components

• Import the styled component on top page like so:

 * import styled from 'styled-components'

• Declare 'styled.name_of_element in a variable which will be used to wrap the element to be styled. A typical example:

const button = styled.newButton``

Application of this is simple, take the variable that was styled, replace it with the button tags in the render like so:

<newButton>My Styled button</newButton>

Note: You can write all your custom styles on a seperate page for proper house keeping, then import that page on your component.