Style

interface Style <Variants> {

(props?: StyleProps<Variants>): string;

(match: MatchResult): string;

readonly className: string;

readonly defaults: StyleProps<Variants>;

readonly selector: string;

}

§Type Parameters

Variants

[src]

§Call Signatures

(props?: StyleProps<Variants>): string

[src]

CSS Class associated with the current component.

const button = style({
  base: css({
    color: "DarkSlateGray"
  })
})

<div className={button()} />

(match: MatchResult): string

[src]

To be used as resolve within config.rules:

{
  rules: [
    // label?prop=value&other=propValue
    // if the style has base eg no prop is required
    ['label(\\?.+)?', style( /* ... *\/ )],

    // if the style requires at least one prop
    ['label\\?(.+)', style( /* ... *\/ )],
  ]
}

The first group is used to extract the props using {@link !URLSearchParams | URLSearchParams}.

§Properties

readonly className: string

[src]

CSS Class associated with the current component.

const button = style({
  base: css`
    color: "DarkSlateGray"
  `
})

<div className={button.className} />

readonly defaults: StyleProps<Variants>

[src]

readonly selector: string

[src]

CSS Selector associated with the current component.

const button = style({
  base: css({
    color: "DarkSlateGray"
  })
})

const Card = styled({
  base: css`
    & ${button.selector} {
      boxShadow: "0 0 0 5px"
    }
  `
})