Compose CSS classes using TypeStyle
We will demonstrate composing classes using the utility classes function. classes is also what we recommend for theming. Using pure CSS classes means that the component consumers are free to customize the component using any technology (not just TypeStyle). classes is also what is recommended for conditionally applied TypeStyle CSS class names.
[00:02] Here, we have a simple react application that renders a div to the DOM. We can quite easily move the simple div into a stateless app component. This app component goes ahead and returns the same thing as before. Now, we go ahead and render this app component.
[00:30] At the heart of TypeStyle is the style function, which simply takes a style object and returns a generated CSS class name. Because it generates just class names, it is very easy to integrate theming into a component by simply taking a class name property.
[00:49] The users of a component can use any framework they want to author the CSS class. We can even use TypeStyle's style function to generate a CSS class on the fly. Let's jump to our app component, pass in the class name property, and generate a class using the style function that bumps up the font size.
[01:13] We now jump to our app component's root div, and retain the class name property. We go ahead and append this passed-in class name. Now, when we run the application, you can see that this bumped up font size customization gets applied.
[01:31] This app component works fine if the class name property is always provided. However, if you want to make this class name property optional, and someone uses a component without any customization, and when we run the app, the class name prop will be undefined within the app component.
[01:52] If you look at the DOM, we get this ugly and potentially style-breaking class name called undefined. Instead of doing a plain string concatenation within the component, we can actually make this better by simply checking if the class name was passed in before doing the string concatenation.
[02:11] Since the class name was passed in, we will go ahead and append a space before it to add it to the base class name, otherwise we will simply have an empty string. Now, let's create a CSS class to denote some error condition in the UI.
[02:29] This class simply applies a background color of red. Our app component can accept another optional property called haserror, which is going to be a Boolean. It then uses this haserror property to create a string for class name concatenation, similar to what we did for the previous option of class, but this time, it uses this error class name.
[02:57] You can see that this whole string concatenation for different CSS class names, which may or may not be present, is becoming needlessly verbose. Fortunately, TypeStyle provides a handy classes function for composing CSS classes.
[03:12] This function filters out any non-string values and faulty values, and combines the class name with spaces in between. Now, we can zoom back to our previous string concatenation. We can go ahead and comment this whole thing out. This time, we will use the classes function.
[03:30] We always want the base class name, so that's easy enough. Then the class name will automatically be applied only if it is actually present. Finally, we'll go ahead and check if haserror is true. If it is, then we should the error class name, otherwise this expression will be false, and it'll get ignored within the classes function.
[03:53] In short, classes is for concatenating CSS classes, and can be used for theming and composing condition-driven CSS classes.