Styled + ThemeProvider

[ItsJonQ]

Styled + ThemeProvider

A bunch of updates for this one! Firstly, withStyled is renamed to styled to follow the conventions established by other CSS-in-JS solutions.

A breaking update would be the reversal of the curried functions to create a Fancy component.

It was…

fancy(css)(Component)

It is now

styled(Component)(css)

This approach is more intuitive, and again, it's a standard established by other libraries.

Lastly, and more importantly, this update provides the ability to do global theming and CSS scoping.

Theming

Fancy comes with Theme.Provider. Added to the top-level of your app, it can modify fancy styled components via a special props.theme prop.

Define your theme props to Theme.Provider as theme.

Example

import styled, { ThemeProvider } from '@helpscout/fancy'

const css = props => `
  .Card {
    background: ${props.theme.dark ? 'black' : 'white'};
    position: relative;
    border: 1px solid black;
  }
`

const Card = props => (
  <div className="Card">
    <div className="Card__block">{props.children}</div>
  </div>
)

const StyledCard = styled(Card)(css)

const App = () => {
  ;<div id="App">
    <ThemeProvider theme={{ dark: true }}>
      <div>
        ...
        <StyledCard />
        ...
      </div>
    </ThemeProvider>
  </div>
}

Scoping

Theme.Provider has another special scope prop that allows you to define additional selectors to scope your fancy styled component CSS under.

Example

<ThemeProvider scope="html #App">
  <StyledCard />
</ThemeProvider>

If the hashed CSS classes for StyledCard was .Card__213jdhx, they will now render as html #App .Card__213jdhx.

[coveralls]

Pull Request Test Coverage Report for Build 82

• 61 of 61 (100.0%) changed or added relevant lines in 8 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 100.0%

---

Totals
Change from base Build 77:	0.0%
Covered Lines:	168
Relevant Lines:	168

---

💛 - Coveralls