|
- import {css} from '@tesseract-design/goofy-goober';
-
- const getClassName = (borderColor?: string) => css.cx(
- css`
- padding: 1rem;
- `,
- css.nest('.child-class')(
- css`
- color: red;
- `,
- ),
- css.media('(min-width: 600px)')(
- css`
- padding: 2rem;
- `,
- ),
- css.if(typeof borderColor === 'string')(
- css`
- border-width: 1px;
- border-style: solid;
- `
- ),
- css.dynamic({
- 'border-color': borderColor,
- }),
- )
-
- export default function Home() {
- return (
- <div className={getClassName('red')}>
- <div className="child-class">
- Hello World
- </div>
- </div>
- )
- }
|