https://github.com/NEO97online/stencil-styled-components

Style your Stencil apps without stress 💅 Inspired by the original React package, styled-components.
https://github.com/NEO97online/stencil-styled-components

Last synced: 5 days ago
JSON representation

Style your Stencil apps without stress 💅 Inspired by the original React package, styled-components.

• Host: GitHub
• URL: https://github.com/NEO97online/stencil-styled-components
• Owner: NEO97online
• Created: 2018-10-10T10:03:43.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:17:35.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T00:04:49.624Z (29 days ago)
• Language: TypeScript
• Homepage:
• Size: 790 KB
• Stars: 101
• Watchers: 2
• Forks: 14
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-stenciljs - Stencil Styled Components - components to StencilJS (List of Awesome Components Made using StencilJS / Component Libraries)

README

        
# Stencil Styled-Components

Small library to bring the concept of [styled-components](https://github.com/styled-components/styled-components) to StencilJS.

## Installation

```

npm i stencil-styled-components

```

## Usage

```jsx

import { Component } from '@stencil/core'

import styled from 'stencil-styled-components'

const StyledDiv = styled.div`

  display: inline-block;

  background-color: ${props => props.invert ? 'black' : 'white'};

  color: ${props => props.invert ? 'white' : 'black'};

  width: 100px;

  height: 100px;

  &:hover {

    border: 1px solid #448aff;

  }

`

@Component({

  tag: 'my-component'

})

export class MyComponent {

  render() {

    return (

      


        

          Hey, I'm styled!

        

        

          Hey, I'm inverted with a prop!

        

      

    )

  }

}

```