React 前端框架中JSX Style 数据罗列

2021-06-02 0 By admin

使用 React 前端框架开发页面过程中,我们可以将样式通过 style 属性写在 JSX 格式内容中。在 JSX 格式内容中设置样式时,React 对样式属性的命名和赋值方式做了少许修改。

一、样式属性的命名

React 框架对 JSX 格式内容中的样式属性命名采用了驼峰命名方式。列表如下:

  • alignItems,
  • alignSelf,
  • backfaceVisibility,
  • backgroundColor,
  • borderBottomColor,
  • borderBottomLeftRadius,
  • borderBottomRightRadius,
  • borderBottomWidth,
  • borderColor,
  • borderLeftColor,
  • borderLeftWidth,
  • borderRadius,
  • borderRightColor,
  • borderRightWidth,
  • borderStyle,
  • borderTopColor,
  • borderTopLeftRadius,
  • borderTopRightRadius,
  • borderTopWidth,
  • borderWidth,
  • bottom,
  • color,
  • flex,
  • flexDirection,
  • flexWrap,
  • fontFamily,
  • fontSize,
  • fontStyle,
  • fontWeight,
  • height,
  • justifyContent,
  • left,
  • letterSpacing,
  • lineHeight,
  • margin,
  • marginBottom,
  • marginHorizontal,
  • marginLeft,
  • marginRight,
  • marginTop,
  • marginVertical,
  • opacity,
  • overflow,
  • padding,
  • paddingBottom,
  • paddingHorizontal,
  • paddingLeft,
  • paddingRight,
  • paddingTop,
  • paddingVertical,
  • position,
  • resizeMode,
  • right,
  • rotation,
  • scaleX,
  • scaleY,
  • shadowColor,
  • shadowOffset,
  • shadowOpacity,
  • shadowRadius,
  • textAlign,
  • textDecorationColor,
  • textDecorationLine,
  • textDecorationStyle,
  • tintColor,
  • top,
  • transform,
  • transformMatrix,
  • translateX,
  • translateY,
  • width,
  • writingDirection

二、属性赋值的注意事项

在 React 框架 JSX 格式内容中设置样式时,如果样式属性的赋值单位是像素(PX)的话,可以省略单位。但是部分属性的单位是不能省略的。

  • columnCount
  • fillOpacity
  • flex
  • flexGrow
  • flexShrink
  • fontWeight
  • lineClamp
  • lineHeight
  • opacity
  • order
  • orphans
  • strokeOpacity
  • widows
  • zIndex
  • zoom