Packages
@twind/core › Style
Type parameters
| Name |
|---|
Variants |
Callable
Style
▸ Style(props?): string
CSS Class associated with the current component.
jsx
const button = style({
base: css({
color: "DarkSlateGray"
})
})
<div className={button()} />Parameters
| Name | Type |
|---|---|
props? | VariantsProps<Variants> |
Returns
string
Defined in
packages/core/src/style.ts:119
Style
▸ Style(match): string
To be used as resolve within config.rules:
js
{
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 URLSearchParams.
Parameters
| Name | Type |
|---|---|
match | MatchResult |
Returns
string
Defined in
packages/core/src/style.ts:139
Properties
className
• Readonly className: string
CSS Class associated with the current component.
js
const button = style({
base: css`
color: "DarkSlateGray"
`
})
<div className={button.className} />Defined in
packages/core/src/style.ts:156
defaults
• Readonly defaults: VariantsProps<Variants>
Defined in
packages/core/src/style.ts:141
selector
• Readonly selector: string
CSS Selector associated with the current component.
js
const button = style({
base: css({
color: "DarkSlateGray"
})
})
const Card = styled({
base: css`
& ${button.selector} {
boxShadow: "0 0 0 5px"
}
`
})