Skip to main content

Usage

Creating a component​

import { styled } from '@constcss/solidjs'

const Card = styled.div`
    margin: 5px;
    background-color: #000000;
`

const Title = styled.h1`
    font-size: 20px;
    color: #ffffff;
`

Using a component​

const Component = () => {
    return (
        <Card>
            <Title>Hello World</Title>
        </Card>
    )
}

Conditional styling​

Right now, it does not support interfaces or types as "input type", only params directly inside the object. 

import { styled } from '@constcss/solidjs'
import {createSignal} from 'solid-js'

const Card = styled.div<{enabled: boolean}>`
    color: ${theme.colors.primary};
    ::enabled {
        color: ${theme.colors.secondary};
    }
`

const Component = () => {
    const [enabled, setEnabled] = createSignal(false)
    return (
        <Card onClick={() => setEnabled((e) => !e)} enabled={enabled()}>
            Hello World
        </Card>
    )
}