Autoplay

    Theme your application with styled-components and "ThemeProvider"

    Simon VrachliotisSimon Vrachliotis

    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 .

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    00:00 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.

    00:20 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.

    00:39 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.

    01:05 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.

    Discuss

    Discuss