https://github.com/rgdelato/styled-classnames
styled-components without the components
https://github.com/rgdelato/styled-classnames
css css-in-js styled-classnames styled-components
Last synced: 3 months ago
JSON representation
styled-components without the components
- Host: GitHub
- URL: https://github.com/rgdelato/styled-classnames
- Owner: rgdelato
- License: mit
- Created: 2017-01-21T00:12:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-17T19:06:41.000Z (almost 7 years ago)
- Last Synced: 2024-03-14T17:14:18.559Z (about 1 year ago)
- Topics: css, css-in-js, styled-classnames, styled-components
- Language: JavaScript
- Homepage:
- Size: 41 KB
- Stars: 27
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Warning: This library is no longer being maintained!
I would strongly recommend using another CSS-in-JS library, such as [Emotion](https://emotion.sh/)
# styled-classnames
Use [`styled-components`](https://github.com/styled-components/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](https://twitter.com/glenmaddern), [Max Stoiber](https://twitter.com/mxstbr), and the `styled-components` community.
Be aware that including `styled-classnames` adds a noticeable amount to your final JS bundle size.
## Javascript
[](https://www.npmjs.com/package/styled-classnames)
```
npm install --save-dev styled-classnames
```
```javascript
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 (
);
};
export default FilterLink;
```
## ClojureScript
[](https://clojars.org/cljsjs/styled-classnames)
```clojure
(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:
```javascript
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.