HSDS: React
  • HSDS: React
  • Quick start
    • Components
  • Testing
    • Local Integration Testing
  • Reporting Issues
  • Contributing
    • Getting started
    • Creating a component
    • Styling
    • Write a story
    • Writing tests
    • Adding documentation
    • Submitting for review
    • Publishing a release
Powered by GitBook
On this page
  • CSS-in-JS
  • Styled Components
  • StrongUI
  • is-superBold
  • export
  • Next
  • See also
  1. Contributing

Styling

PreviousCreating a componentNextWrite a story

Last updated 4 years ago

In this guide, we'll walk through styling our newly created .

CSS-in-JS

HSDS uses CSS-in-JS techniques for styling, powered by .

hsds-react/
  └── src/
      └── components/
          └── Strong.css.js
          ├── index.js
          └── Strong.jsx

The .css.js file extension is a convention HSDS uses to distinguish dedicated CSS-in-JS file types. They're still plain ol' .js files though 🤓.

Styled Components

Add the starting styled component boilerplate for Strong.css.js:

import styled from 'styled-components'

export const StrongUI = styled('strong')`
  font-weight: 600;

  &.is-superBold {
    font-weight: 900;
  }
`

export default StrongUI

Whoa 😳! Lots of stuff! What is this stuff!

StrongUI

The design pattern we use to distinguish styled-components (SC) vs. regular React components is to add UI to the end of the name.

is-superBold

This contains the modifier styles specified in our Strong component. Similar to Sass, ampersand for className inheritance is supported.

export

We're making our StrongUI available as the default export, but also as a named export. The reason for this is incase we need to use the isolated SC in another component.

And that's it 🙏! You've successfully styled our new Strong component 💪.

Next

See also

HSDS's CSS-in-JS practices favour the use of conventional CSS modifier classes, rather than . From experience, this keeps the code much cleaner and easier to read. It also avoids clashing, which sometimes happens with dynamic styling.

Let's to see this thing in a browser!

custom Strong component
styled-components
dynamically computed styles
write a story
Styled component