Style

Component styles can be added in a style property within a class or function component

export class Button extends Component {
    content = () => <button>Click Me</button>
    style = Sass`
        button
            background: blue
    `
}

export function Button() {
    return <button>Click Me</button>
}
Button.style =  Sass`
    button
        background: blue
`

Language

Specify the CSS preprocessor language using the word before the template literal, starting with an uppercase letter

style = Sass`
    button
        background: blue
`

style = Scss`
    button {
        background: blue;
    }
`

style = Css`
    button {
        background: blue;
    }
`

Less is not currently implemented, but could be fairly easily.

Imports

Using SASS/SCSS, import as usual using a relative path

style = Sass`
    @import '../variables.sass'

    button
        background: $buttonBackgroundColor
`

Special rules

Normally in CSS styles applied based on classes (.class) or psuedo selectors (:psuedo) take priority over styles applied to elements (tag). However tag names are converted into classes to allow scoping to work, and as a result have the same priority as class and psuedo selectors rules.

When styles are applied to components (Component), the CSS rule created has 4x class selects (e.g. .C.C.C.C), which crudely pushes up the priority of these styles to override any internal styles. If this isn't sufficient, the !important tag can be added to the styles to force them to take priority.

Common CSS syntax is support, but some advanced combinations may fail

Styling sub components

You can specify styles to apply to a sub component that is rendered within your component

import { DeleteIcon } from './DeleteIcon.jsx'
            
export class DeleteButton extends Component {
    content = () => <button><DeleteIcon /></button>
    style = Sass`
        DeleteIcon
            padding: 0.5rem
    `
}

This works simply by creating a class name and passing it to the target component as className

The sub component must accept the className prop, and apply it suitably

export class DeleteIcon extends Component {
    content = () => <span className={this.props.className}>&#9249;</span>
    // &#9249; is an HTML entity. Search it in google to see google render it.
}

Generally the className will be applied to the root element of the component - however sometimes this will vary.

Components from the framework will generally accept styles out of the box.

Escaping from scoping

Styles in a component stylesheet only affect that component. If your include a component, that outputs certain HTML elements, you will not, by default, be able to style them via a parent component stylesheet.

The following with the above DeleteIcon component will not work!

import { DeleteIcon } from './DeleteIcon.jsx'
            
export class DeleteButton extends Component {
    content = () => <button><DeleteIcon /></button>
    style = Sass`
        button span
            padding: 0.5rem
    `
}

However, scoping can be escaped from by using :i() for ignore

The following code will work!

import { DeleteIcon } from './DeleteIcon.jsx'
            
export class DeleteButton extends Component {
    content = () => <button><DeleteIcon /></button>
    style = Sass`
        button :i(span)
            padding: 0.5rem
    `
}

For longer specifiers, escape each term separately, e.g.

div :i(p) :i(span)