On this page

cssx.set

In set you define the properties directly, there's no need to worry about classNames here, we recommend using the variable name css~.

style.ts

import cssx from 'typedcssx'
 
export const cssLink = cssx.set({
  fontSize: '14px',
  color: 'var(--color-link)',
  textDecoration: 'none'
})
 
export const cssBox = cssx.set({
  display: 'block',
  padding: 20,
  width: 60,
  height: 60
})
 
export const cssContainer = cssx.set({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
})

Compiled set

The hash of the object is directly attached to the className.

css

._jo139 {
  font-size: 14px;
  color: var(--color-link);
  text-decoration: none;
}
 
._AAbLv {
  display: block;
  padding: 20px;
  width: 60px;
  height: 60px;
}
 
._Ux5Y4 {
  display: flex;
  justify-content: center;
  align-items: center;
}