How To Add Classnames To Styled Components Medium

In styled-components, you style directly into the component. Where you would normally use classNames, divs, h1s, etc, basically any HTML element, you will actually use the styled element to help indicate what you want styled a specific way. But before we do this, we want to import the styled-components into your React component. ...

This wouldn`t work because just as always, className on the StyledPersonListContainerelement is still just a prop to styled-component. styled-components exposes the attr constructor. according to the docs, To avoid unnecessary wrappers that just pass on some props to the rendered component, or element, you can use the .attrs constructor. ...

We are not styling an HTML elements based on their class names. “The basic idea of styled-components is to enforce best practices by removing the mapping between styles and components.” Lets now create a simple React app which uses the create-react-app under the hood. ...

use the attrs constructor We use the attrs constructor which exposes the className and then we can bind our className props to the attrs className. we can now style the dynamic classNames accordingly Styled Components ...