Introduction

This package is for projects using React that allows you to write HTML elements in which you can pass responsive style props easily. Normally when we write and style HTML elements in React we use the standard style props as follows:

The syntax is a little bit clunky, and gets a bit harder to read as we add more and more css rules. And if we wanted to make it responsive, e.g change the font size on smaller screens, we'd need to give it a class name and write some bulky CSS media queries.

Using this package means that we get a nicer style props syntax, and can easily make this responsive using Styled System's responsive style syntax. With this in mind, the example above becomes:

Now instead of using the standard style prop we have a prop for every css property, e.g color and fontSize. If we want to make a property responsive we simply pass an array of strings instead of just one string, where each element in the array applies the rule to a certain screen size. In this example, the font size is 16px on small screens, and 18px on all larger screens. Notice that <p> becomes <P> - we'll discuss this in the next section.

Another benefit we get is access to direct CSS selector props. This means that we can add rules for selectors such as :hover directly through a prop in React. To change color, for example, on hover we do the following:

By adding a CSS selector name such as hover as a prop we get quick, direct access to selectors we want to use and don't have to write separate css or use bulky template literals. Taking this even further we can combine this with the responsive syntax:

Now when we hover on small screens the color is green, and on larger screens it is blue - no bulky CSS with media queries required and not a template literal in sight!

Installation

Install html-styled and its peer dependencies.

or