DEV Community

Cover image for Implementing styled components with React
kennethnnah
kennethnnah

Posted on • Edited 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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay