A Styled Components like library for StencilJS
This project is meant to handle fast production and easy maintenance, this is not an overall solution is a way for us for fasten our work and grant quality during all the development project.
Contributions and feedbacks are welcome.
Basically it gives you the flexibility of CSS in the power engine of JS. Helps keep clean your code and avoid spaghetti code and css files long like script rolls.
yarn add styled-stencils
or if you have time to spare
npm install styled-stencil
Use your styled components in JSX
as you would have done with normal components
import {Component} from '@stencil/core';
import styled from 'styled-stencil';
const Background = styled.section`
padding: 4em;
background: papayawhip;
`;
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: ${(props) => props.color};
`;
@Component({
tag: 'my-component'
})
export class MyComponent {
render() {
return (
<Background>
<Title color="palevioletred">Hello World, this is my first styled component!</Title>
</Background>
);
}
}
And here the result you'll se on page. Same as styled-components 😉
- Node >= 10.1
- Nicola Bertelloni – https://github.com/wanbinkimoon
- Michael Auderer who made a first concept of this
- Max Stoiber who had the very first idea of styled components – as long as I know.