Define and Override Default CSS-in-JS Values for Arguments in a JavaScript Function Mixin
Often times it makes sense to define sensible default styles for mixins. This way, the user can just make a call to the mixin and pass in any explicit styles that they want to override.
In this lesson, you will learn how to convert arguments with default values as well as how to use default values with objects destructuring.
Instructor: [00:00] we have two buttons. One is written using SCSS, and the other one is CSS-in-JS. Let's have a look at these button size mixin. We pass null arguments in here. Let's have a look at this mixin in order to understand why we can do it.
[00:15] Here is our button size mixin. We accept four arguments, and then we declare the properties. The important thing about these arguments is that we define a default value. Now the user of button size mixin doesn't have to pass all arguments. Let's implement the same in JavaScript.
[00:35] Here we have our CSS-in-JS button. Here is the mixin function code. Like in SCSS, we are not passing any arguments in here. Let's have a look at the mixin function. Here is our function declaration. Here is our properties. Here are the arguments.
[00:52] This is how you define a default value for an argument in JavaScript. Because in JavaScript all variables are explicit, we have to import them and name them explicitly. Now if I want to use default values and named arguments at the same time, this is the syntax I have to use. Here we define a default object.
[01:11] The default object is needed because we cannot destructure undefined. This syntax is called "destructuring." We are taking these properties from the passed object and create local variables in this function.
[01:25] Here we define the default value for each variable. Now if you want to pass just one specific argument, we can do it using an object. All other properties will receive a default value...