Setting Default Styles on Components

Sebastian (00:01)
Hey everyone. My name is Sebastian, and in this video, we're going to be looking at how you can set default styles on your components in app builder.

Sebastian (00:09)
So here I am in an app builder project, and what I'm asking you, for a quick example is drag and drop a button onto the screen. So when I go on ahead and do that. My button is now on the screen right there. I'm just going to change it to the contained variant and give it a little bit of padding. So I'm just going to say, 10 pixels of padding applied to all sides, and boom there's our button.

Sebastian (00:31)
Now, as you can see, there is a bunch of default styling properties that were put on this button when I first dragged and dropped from the page, such as the color, the border radius, and a number of other things, right. So that's essentially the default styling for a button component. Now, let's say that you wanted your text to be bold and larger on every button, right, and by default. And so you didn't want to have to do those changes every single time you drag and drop the button onto the screen.

Sebastian (00:57)
Well, in Apple, you can go in and change the default or override the default settings of the components that you are using. So to do that, what we're going to do is go down to our settings, to excuse me, sorry, we're going to our theme. We are going to go to the components tab here, and then select the component we want, which is the button. In this case, we're going to press this icon here, and here is all the different classes that are essentially working on styling the different buttons and the different variations of the button.

Sebastian (01:27)
And so in this case, we're going to find the button contained. Right here. Alright, let's find the right one. And we can see it for different sizes. So cool. So button contains size small, medium or large. Let's go ahead and edit the medium one. So for a medium button, what we're going to say is just for the sake of demonstration that we want our font size by default to be 20 pixels, and we want our font weight to be 100 or 500. Cool, let's just do that. Awesome. So now we can see that that changed the render, the example that we have here.

Sebastian (02:17)
And now when we go back to our page, we can see the update, the default to this button, which we now go override on that specific instance. But if we go ahead and drag a new button onto the screen, we can see that as soon as we hit the contained variant, that it starts to adapt or inherit all those properties that we set or the style rules.

Sebastian (02:43)
I hope that this video helped you understand how you can override the default styling of the components that you have access to an app builder. Hopefully found it helpful and looking forward to seeing you in future videos.

‍