DEV Community

Cover image for Implementing styled components with React
kennethnnah
kennethnnah

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode
  • Import the styled component on top page like so:
 * import styled from 'styled-components'
Enter fullscreen mode Exit fullscreen mode
  • 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``
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)