https://github.com/karolisgrinkevicius/styled-conditions

👨‍🎨 Flag utility for emotion CSS-in-JS to conditionally apply styles
https://github.com/karolisgrinkevicius/styled-conditions

Last synced: 3 months ago
JSON representation

👨‍🎨 Flag utility for emotion CSS-in-JS to conditionally apply styles

• Host: GitHub
• URL: https://github.com/karolisgrinkevicius/styled-conditions
• Owner: karolisgrinkevicius
• License: mit
• Created: 2019-07-10T16:48:23.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T04:30:31.000Z (about 2 years ago)
• Last Synced: 2024-08-09T01:42:27.035Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 798 KB
• Stars: 11
• Watchers: 1
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - styled-conditions - in-JS to conditionally apply styles | karolisgrinkevicius | 8 | (JavaScript)
• awesome-emotion - styled-conditions - Ultra-lightweight flag utility to conditionally apply css depending on React props. (Libraries)

README

        


  👨‍🎨 


  Styled Conditions


[![npm](https://img.shields.io/npm/v/styled-conditions.svg?style=flat-square)](https://www.npmjs.com/package/styled-conditions)

[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/styled-conditions.svg?style=flat-square)](https://www.npmjs.com/package/styled-conditions) [![Travis CI Build](https://travis-ci.com/karolisgrinkevicius/styled-conditions.svg?style=flat-square)](https://travis-ci.org/karolisgrinkevicius/styled-conditions)

![](https://img.shields.io/badge/licence-MIT-blue.svg?style=flat-square)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)



Ultra-lightweight dependency-free flag utility for [emotion](https://github.com/emotion-js/emotion) CSS-in-JS

to conditionally apply css depending on [React](https://github.com/facebook/react) props including support for [styled-system](https://styled-system.com).

## Install

```sh

npm i --save styled-conditions

```

## Usage

```js

import styled from '@emotion/styled';

import { is } from 'styled-conditions';

const Button = styled(MyComponent)`

  ${is('black')`

    color: black;

  `}

  ${isNot('devil')`

    color: ${props => props.theme.colors.colorForAngels};

  `}

`;

```

## License

[MIT](LICENSE)