@stereobooster/unstyled-components

unstyled-components

styled-components based on React's style prop

My favorite CSS-in-JS API has been in React from day one.

— Sebastian Markbåge (@sebmarkbage) May 31, 2018

Example

import React from "react";
import isPropValid from "@emotion/is-prop-valid";
import { styled, ThemeProvider } from "@stereobooster/unstyled-components";

const H1 = styled("h1", {
  shouldForwardProp: prop => isPropValid(prop) && prop !== "color"
})(props => ({
  color: "hotpink",
  background: props.theme.background
}));

export const StyledTest = () => (
  <ThemeProvider theme={{ background: "#000" }}>
    <H1 color="lightgreen">This is lightgreen.</H1>
  </ThemeProvider>
);

Why?

...