This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "JSX Pragma" Lesson
[00:00:00]
>> Jason Lengstorf: Let's go ahead and style up our docs page a little bit, I wanna de-emphasize this, this update time is useful. But we don't want it to be like right in your face or to look as important as the rest of the content on the screen. So let's go into our docs page, and let's add some styles, and I'm gonna do that by replacing React.
[00:00:21] We're gonna use the JSX pragma, again, I'm gonna import JSX from theme-ui. And then I'm going to just add some basic styles here, we'll do sx. And inside of it, we can say the border top, and now, we're gonna get into an advanced case. You can actually just access the whole theme object as a prop, or as an argument passed to a function, so I can just do theme and then return whatever I want from it.
[00:00:56] So if I want to set my border for example to be 1px soli,d and then we'll use the theme.colors.muted, that'll work. And then I can set the color of the text itself to be muted. I can set the font size, we'll make it a little bit smaller so I'll set at 14.
[00:01:22] We want some margin top, we want some padding top, and let's see how that looks, yeah, that looks pretty good. It's de-emphasize, it's clear that it's a separate part of thing. It's not taking over the the page, and that, I think is probably a good place to call this set.
[00:01:42] So let's commit our work, and then we can move on.
>> Speaker 2: Quick question.
>> Jason Lengstorf: Yeah?
>> Speaker 2: In the line number 12, where you set the border for the top there.
>> Jason Lengstorf: Yes?
>> Speaker 2: Do you have just use the string muted, or do you have to use that return?
[00:01:59]
>> Jason Lengstorf: Theme UI has certain fields that are set up to accept the keywords, border top is a composite field, so it doesn't. And that's because you'd have to get into some string parsing that could get really tricky. So as just a guard against complexity, they opted to use the functions syntax instead.
[00:02:27] There is on the Theme UI site I believe a reference of which fields accepts which keywords. And then in any other case, like honestly try it, and if it doesn't work, just switch out for the function version. So let's get this committed.
>> Jason Lengstorf: Add Theme UI and get that pushed up.
[00:02:56] Okay, so