styled-classnames v2.2.1

styled-classnames

Use styled-components without the components!

...it's a short hack that still uses styled-components under the hood, so all the credit for this goes to Glen Maddern, Max Stoiber, and the styled-components community.

Be aware that including styled-classnames adds a noticeable amount to your final JS bundle size.

Javascript

npm install --save-dev styled-classnames

import React from "react";
import Link from "react-router/Link";
import styled from "styled-classnames";

const linkClassName = styled`
  color: ${props => props.color};
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;

  &:hover { border-color: rgba(175, 47, 47, 0.1); }
`;

const activeClassName = styled`
  border-color: rgba(175, 47, 47, 0.2);
`;

const FilterLink = (props) => {
  return (
    <Link
      {...props}
      className={linkClassName(props)}
      activeClassName={activeClassName(props)}
    />
  );
};

export default FilterLink;

ClojureScript

(ns demo.core
    (:require [reagent.core :as reagent]
              cljsjs.styled-classnames))

(def font-family (atom "Baskerville"))

(def home-class (js/styled "
  font-size: 72px;
  font-family: " @font-family ";
  font-style: italic;
  color: " #(:color %) ";
"))

(defn home-page []
  [:div
    [:h2 {:class (home-class {:color "rebeccapurple"})}
      "Welcome to Reagent"]])

Details

Helper methods from styled-components are also exposed:

import styled, { css, keyframes, injectGlobal } from "styled-classnames";

Note that ThemeProvider and withTheme are React-specific and are not included in this library. If you need them, you can still import them from styled-components, or if you know how context works in React, you could write them yourself.