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
size	width、height
maxW	maxWidth
minW	minWidth
maxH	maxHeight
minH	minHeight
pos	position
d	display
p	padding
pt	paddingBlockStart
pb	paddingBlockEnd
pl	paddingInlineStart
pr	paddingInlineEnd
px	paddingInlineStart、paddingInlineEnd
py	paddingBlockStart、paddingBlockEnd
m	margin
mt	marginBlockStart
mb	marginBlockEnd
ml	marginInlineStart
mr	marginInlineEnd
mx	marginInlineStart、marginInlineEnd
my	marginBlockStart、marginBlockEnd