Aliases

Aliases 用于定义 CSS 属性的别名，从而简化 CSS 属性名并支持组合 CSS 属性。

自定义 Aliases

Aliases 可在您的主题配置 theme.aliases 部分定义：


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  aliases: {
    w: 'width',
    h: 'height',
    px: ['paddingLeft', 'paddingRight'],
  },
})

Alias 值的类型为 CSSProperty | CSSProperty[]。

TypeScript

之后，如果您正在使用 TypeScript，可通过 Module Augmentation 扩展自定义的 Aliases。


declare module '@nex-ui/react' {
  interface AliasesOverrides {
    w: 'width'
    h: 'height'
    px: ['paddingLeft', 'paddingRight']
  }
}

使用 Aliases

在定义过后，您可以通过 sx 属性、 defineRecipe 或者 defineSlotRecipe 使用自定义的 Aliases。


import { Box } from '@nex-ui/react'
 
export default function App() {
  return (
    <Box
      sx={{
        w: '16',
        h: '16',
        px: '16',
      }}
    >
      Box
    </Box>
  )
}

💡

Nex UI 已关联 width、height 与 sizes，paddingLeft、paddingRight 与 spaces 之间的映射关系，Aliases 会在内部转化为相应的 CSS Property，因此可以直接使用。在 Scales 了解更多信息。

默认可用的 Aliases

Alias	CSS Property
bg	backgroundColor
fs	fontSize
lh	lineHeight
w	width
h	height
p	padding
pt	paddingTop
pb	paddingBottom
pl	paddingLeft
pr	paddingRight
px	paddingLeft、paddingRight
py	paddingTop、paddingBottom
m	margin
mt	marginTop
mb	marginBottom
ml	marginLeft
mr	marginRight
mx	marginLeft、marginRight
my	marginTop、marginBottom