css

css function is a function that returns a string.

How to use

CSS Literal

You can use css as a tag function to create a css string. Pass in a string of css properties as an argument, ans it will be converted into a class list.

1import { css } from '@devup-ui/react'
2
3function App() {
4  return (
5    <div
6      className={css`
7        background: red;
8        width: 100px;
9        height: 100px;
10      `}
11    />
12  )
13}
1import { css } from '@devup-ui/react'
2
3function App() {
4  return (
5    <div
6      className={css`
7        background: red;
8        width: 100px;
9        height: 100px;
10      `}
11    />
12  )
13}

The content above is rendered/transformed as shown below:

1function App() {
2  return <div className="a b c" />
3}
1function App() {
2  return <div className="a b c" />
3}

1.a {
2  background: red;
3}
4.b {
5  width: 100px;
6}
7.c {
8  height: 100px;
9}
1.a {
2  background: red;
3}
4.b {
5  width: 100px;
6}
7.c {
8  height: 100px;
9}

CSS Object

You can also use the css function by passing in a css object as an argument.

1import { css } from '@devup-ui/react'
2
3function App() {
4  return (
5    <div
6      className={css({
7        background: 'red',
8        width: '100px',
9        height: '100px',
10      })}
11    />
12  )
13}
1import { css } from '@devup-ui/react'
2
3function App() {
4  return (
5    <div
6      className={css({
7        background: 'red',
8        width: '100px',
9        height: '100px',
10      })}
11    />
12  )
13}

The content above is rendered/transformed as shown below:

1function App() {
2  return <div className="a b c" />
3}
1function App() {
2  return <div className="a b c" />
3}

1.a {
2  background: red;
3}
4.b {
5  width: 100px;
6}
7.c {
8  height: 100px;
9}
1.a {
2  background: red;
3}
4.b {
5  width: 100px;
6}
7.c {
8  height: 100px;
9}