Check out a free preview of the full Intermediate Gatsby with Gatsby Themes course:
The "Inline Styling with sx" Lesson is part of the full, Intermediate Gatsby with Gatsby Themes course featured in this preview video. Here's what you'd learn in this lesson:

Jason continues to improve the UI by adding styling to the layout component, and importing the component into the different pages. The styling is added inline using sx, a Gatsby prop.

Get Unlimited Access Now

Transcript from the "Inline Styling with sx" Lesson

[00:00:00]
>> Jason Lengstorf: This is doing what we want. So we've got kind of a basic structure for our site. We've got some clicks between. But I want this button to be a little more noticeable. So I'm gonna use a variant in Theme UI to set up a button style, because I wanna be able to access that.

[00:00:16] So to do that, I can jump into our Theme UI. And I'm just gonna define a button and I want this to be a hollow button. We don't wanna draw a ton of attention to it. It's not like a call to action, it's just a thing you can do.

[00:00:29] And I'm gonna set the background color to background. And note, this is just a regular style object. The same way that you would do it if you were using the SX prop, you're gonna do it here as well. So we're gonna do the background of background. I'm gonna setup the border, will be theme, and we'll set it to be like 2 px solid.

[00:00:48] And let's add theme.colors.primary. Then I can set the borderRadius to 10. Let's set the color of the text to primary color. I'm also gonna set the display to inline-block. Let's set the fontFamily to heading, the fontWeight to bold. I'll make this a really fancy button, give it some padding.

[00:01:19] We'll take the textDecoration out. Make sure that it doesn't get underlined, we're already calling attention to it with the button outline. And then we're gonna even give this some CSS transitions. So I'm gonna set it up to run 200 milliseconds, that's a good transition length. We use linear because we're gonna do color transitions, and in my experience that tends to be clean.

[00:01:44] This one it's done with a linear easing. And then finally, we wanna set up some focus styles because again, we want that to work. And I didn't show that earlier. So this is kinda what I'm talking about. And you can see this one is styled, there's an outline that shows up on my tab to it.

[00:02:00] And it's nice and clean. It uses the same color. It's offset from the text. But if I tab down to this link by default, it's highlighted, it's easy to see. And so defaults aren't a bad thing. You can leave the defaults in place. But if you really wanna make it look kinda styled, and you wanna take control over the look, never remove focus styles.

[00:02:24] Never, never, never remove focus styles unless you're replacing them. So what we're doing is we're just gonna make these more custom. So my focus style here is going to be a background color highlight. I'm gonna use an outline and we'll set that up to be 2px solid. The theme colors.primary.

[00:02:48] All right, and then we'll set that outlineOffset to 2. And then we also want some hover styles if you hover over it. So let's add a hover style. And we'll just make the background highlight, if you hover over this. Okay, so I've done this. But we're not actually using it yet.

[00:03:07] So the way that variance work is anything that's at top level that's not a reserved word, so like the colors or the fonts, we can just define a theme. And so if you wanted to you could namespace this to your theme and you could say, theme docs dot button dot primary or something if you wanted to make that work.

[00:03:27] In most sites, I've found that the complexity doesn't get that high so you can get away with just sensible names, not necessarily heavily named space names. Your mileage may vary depending on the size of your team and how many different people are gonna touch it. So to actually use this we can go back out to this index and I want to be able to set this one to have a variant.

[00:03:53] So I'm gonna set thesx prop to variant. And then we just use dot notation. So button.hollow, okay? But in order for this to work, we need to switch over to the JSX pragma. So let me replace react up here with the JSX pragma from the theme-ui, okay? So we've got the JSX pragma and that means that we have access to the sx prop.

[00:04:23] And all we've done is signify that this is a hollow button, based on our variance. And assuming I didn't typo anything, there we go, we've got a button and it picks up all the styles. So when I start clicking around you can see it now still shows an outline, but that outline looks a little more on brand.

[00:04:44] So we want this to be very obvious. When you get into a button the outline should be very noticeable because on a busy page when somebody is tapping through they should know exactly what is currently highlighted with their keyboard. So this isn't like I don't think you would submit that for designer works, but this can be really apparent to whoever is keyboard tabbing through your site, that that is the button that is currently selected.

[00:05:09] So from there, I think we can save our work. And then we'll move on to further customizing this.
>> Speaker 2: What was that the button of variant?
>> Jason Lengstorf: Yeah, so variant in Theme UI, are just a way to give a name set of styles, which makes them reuseable without having to have an object that you drop into the sx prop or something.

[00:05:38] So yeah, we have set up the Theme UI and gatsby config and install these dependencies. I wrote a layout file, setup a custom theme and then rewrote the index and history pages to use that layout. So let's commit that.
>> Jason Lengstorf: Add Theme UI, push it up.