style
attribute on regular HTML elements. It differs from regular HTML though. React components expect an object in the form of property: value
. The property itself needs to be declared in JavaScript (not its regular CSS counterpart) form meaning zIndex
instead of z-index
, backgroundColor
instead of background-color
or marginTop
instead of margin-top
. If the values accept declarations in pixels, it is optional to explicitly define px
as the corresponding unit:z-index
, flex
or fontWeight
) are not affected by this and can be used just like we are used to. React does not add px
to these.style
property of DOM elements document.getElementById('root').style
is also an object and also ensures that we secure these by preventing XSS.className
instead of class
:className
prop dynamically:className
is item
in each case. If the selected item is the current item, it also gets the class item item--selected
.classnames
has become the de-facto standard to define classes based on a condition. It can be installed via the CLI:classNames.
The function expects an arbitrary amount of parameters which can be a string or an object in the form of { class: true | false }
. It works similar to what you might already expect: if the value in the condition is true
, classNames
employs a class with the same property name:true
:ProfileImage.js
, the CSS Modules approach often introduces another file with the name ProfileImage.module.css
.When these CSS modules are imported, a cryptic classname is generated to ensure that the classname is only used in the single component. This aims to prevent that classnames are accidentally used by two different components.css-loader
for Webpack..module.css
(just regular .css
would also be okay) but it has become convention in many well-known tools. Create React App also supports this convention out of the box without the need for further configuration by using the previously mentioned css-loader
in the background (implemented in Webpack).css
now containts an object with properties that relate to the classnames in our CSS modules. If there is a CSS class in the CSS file that has the name image
, we can now access the property image
on the CSS object. The resulting value in the rendered markup is a unique string such as ProfileImage_image_2cvf73
.image
in another component and also imported the css file with an image
class, we wouldn not run into conflict as we would usually do in regular CSS. The generated classname would be different.styled
function, we define the HTML element that we want to style. Template literal syntax from ES2015 is used to define the CSS for our styled component.const Button = styled.button
styled components creates a new Button
component and equips it with the CSS properties that we have defined within the template literals. Inside of the template literals, regular CSS can be used.:hover
status, we can define the following:not-allowed
symbol if the button had a disabled
property. Moreover, styled components offers support for theming, server-side rendering, css animations and much more. For those of you who would like an in-depth explanation and overview, I suggest you check out the thorough documentation.