Material UI Tutorial #15 - More on makeStyles

Key Takeaways

all right then gang so in this lesson i just want to take a quick step back to this make styles function right here and talk more about that so we already covered the basics of using this function to create css rules like this or classes and then we can access those in our component by invoking that hook right here now there's a couple of extra things i want to talk about that we can do with this function first of all what if i want to apply some padding for example to the page class well yeah i could just say the padding down here and hardcode a value like 20 but i might also want to use the spacing values as defined on the default theme object now you could find out those manually and add them in here or we could inject the theme object directly into this make styles object and access it that way now to do this all we have to do is turn this object parameter right here into a function which returns an object so right now this is going to do exactly the same thing if we return an object right here and pass in all of these properties like so so this is exactly the same now as before but instead of just passing in the object as a parameter we're now passing a function which returns the object the same kind of thing but doing it this way it means we can take in arguments here and an argument that we automatically get access to is the theme object so now we can use that theme object and all the different properties on it inside our classes so for instance i could say right here instead of hard coding the padding to be theme dot spacing to access the spacing values and this is a function and i want to pass in three so what that does is take the base spacing which is eight pixels i think for the theme and times is it by three so therefore we're going to get a padding of 24 pixels so if i save this we should see now a bit more padding around the page content awesome now i'm going to do the same thing for the title right here inside the draw so let me create a class for this i'm going to say title and then inside here i'm going to say padding and say theme dot spacing and then pass in two this time all right so we need to apply that class to the title which is right here so let's say class name is equal to classes dot title like so save it and preview and now this has a bit of padding awesome so the next thing i want to show you is how to pass optional arguments into make styles as well or into the different classes or properties that we generate with make styles so let me cross off the layout and instead come to the note card now the first thing i need to do is import it and use it so let me say const new styles is equal to make styles right here i'm going to enter onto that to import it and then we're not going to do a function to return an object here because we're not going to use the theme instead i'm just going to do an object and what i'm going to do is just make a test class and inside here i want a border property now the thing is i want this to be dynamic i want to do some kind of evaluation and if that evaluation is true i'll have a specific border if it's not true then i won't now i want that dynamic check to be based on the category of the note so we somehow need to pass in this note into make styles so we can use it so what i'm going to do is come down here and say const classes is equal to use styles just as we normally do but now i'm going to pass in as an argument this note so now inside different properties i could use a function which returns a property and inside this function i can take in the argument we're passing right here so i get access to the note now and i could evaluate it i could say if the note dot category is equal to work for example that's one of the categories in that case i want to apply a border so i'll return a value and it's going to be one pixel solid and red and now only if the category of the notes is equal to work will we have this border of one pixel solid and red on the test class if it's not work we won't so what i could do is try using this test class on the card so we'll apply the class name right here class name is equal to classes dot test so if we save this and preview now only this one has the red border and this is the one with the category of work so that's two things you can do with make styles first of all we could use a function to return an object and that function can take in the theme if we want to use theme values and also if we want to pass in extra arguments that we use in the different properties like this we can do and then the property can just be a function which takes in that argument so we can use it and also returns some kind of value