Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Theme your application with styled-components and "ThemeProvider"


    In this styled-components lesson, we set a "primary color" within a UI "theme" object. We make this theme accessible to all components by wrapping our application inside a .



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    We are importing three react components styled with style components. Notice that these components share the same UI color, currently hard-coded in each components. Let's improve that, and use style components theme provider. We'll import theme provider from style components alongside our existing inject global here.

    Let's define a theme object, and we'll have a primary property where we'll setup brand color. To make these theme properties available everywhere, we'll rap our root component inside the theme provider. Now, we can pass our theme object in a theme property, so we can access it in children style components.

    Let's update the quote component. Instead of the hard-coded X value, we'll reach out for the theme in props.theme, which is this theme property here, which return this object, and will return the primary color. Let's copy that and update the other instance of the color. We can also update our notice component and our button.

    Great. We now have all our components pulling the brand color from the same one place in our theme object. Let's change the value of the primary color to something else, and viola everything updates accordingly.