Style an HTML Element with Styled Component

Style a React Component with Styled Components



Creating Global Styles with Styled Components

Adjust Style based on props with Styled Components

Animate Styled Components in React

Create and use a Theme in Styled Components

Style pseudo-selectors and classes in Styled Components

Using the `css` prop to define styles in Styled Components

Using the `as` prop to reassign the HTML tag

Use the `attrs` method to add HTML attributes in styled-components

Use Styled Components with the Object syntax

Style a component based on complex props with Styled Components

Styling React Applications with Styled Components

We will learn about the `css` prop we have at our disposal in `styled-components` to change the style of a component right in the render function.

We will use this prop to override the text color of a button with the one we define in this prop.

Sara Vieira: [0:00] I have these three buttons here and let's say, for some reason, I want this button, which is this one here in the elements tab, I want this to have a different color. One thing that we can always do is come here and say style and open another one and say color and then "green," if I wanted it green. I miswrote style, so that's why nothing was happening.

[0:26] If I do this, you can see that this adds it to the element.style, which is not the best way. This is very bad if we talk in terms of maintainability to override these styles. Fortunately, styled-components give us something called the CSS prop, which allows us to do this in a cleaner way. If I say css={`color: green`}, you will see that absolutely nothing happens.

[0:49] One of the things that need to happen is that this includes a either Babel plugin or a macro. I'm using create-react-app, so I support macros. I need to import styled from "styled-components/macro".

[1:01] If I do this, you'll see that this button is green, and you will also see that it just has another class. Another class has been appended to it, and it just overrode whatever it had. If I add something else...Let's say that in here, this is supposed to be important -- where is that? Where is the color? Color, color, color -- and I put important, this is obviously overridden.

[1:31] The good thing about this is that it makes your CSS way more maintainable than normal style tags, as it is possible for you to override these things, as they are just applied CSS classes.

[1:41] This is how you can use the CSS tag in styled-components with the macro.

Course

Styling React Applications with Styled Components

Using the `css` prop to define styles in Styled Components

Share this video with your friends