https://github.com/romellogoodman/styled-inline-components

Inline style system for styled-components
https://github.com/romellogoodman/styled-inline-components

cssinjs react styled-components

Last synced: 11 days ago
JSON representation

Inline style system for styled-components

• Host: GitHub
• URL: https://github.com/romellogoodman/styled-inline-components
• Owner: romellogoodman
• License: mit
• Created: 2017-11-07T17:39:02.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-26T13:35:52.000Z (about 6 years ago)
• Last Synced: 2023-12-23T09:02:47.839Z (about 1 year ago)
• Topics: cssinjs, react, styled-components
• Language: JavaScript
• Homepage:
• Size: 209 KB
• Stars: 13
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# styled-inline-components

Inline style system for styled-components

[![npm](https://img.shields.io/npm/v/styled-inline-components.svg)](https://www.npmjs.com/package/styled-inline-components)

### Install

```

npm install styled-inline-components styled-components

```

## Usage

```js

import React from 'react';

import Elements from 'styled-inline-components';

const {Div, P} = Elements;

const Component = () => {

  return (

    


      
Hello World

    

  );

};

```


Any dom element that styled-components [recognizes as valid](https://github.com/styled-components/styled-components/blob/master/src/utils/domElements.js̨) can be used. To require it, capitalize the first letter of the element.

For example:

| Tag     | Component |

|:--------|:----------|

| div     | Div       |

| p       | P         |

| section | Section   |

## Why?

Inspired by a [styled-components spectrum thread](https://spectrum.chat/thread/014f7053-e24a-4891-a633-4065e91f3bf8).