样式属性

使用 Reflexjs 时，可通过向组件传递属性来设置样式。这些属性称为样式属性。

示例

使用样式属性设置样式的示例 Hero 组件。

export default Hero({ title, text, url, image}) {
  return (
    <section display="grid" col="2" py="10">
      <div>
        <h1 variant="heading.h1">{title}</h1>
        <p variant="text.lead">{text}</p>
        <button bg="primary" py="2" px="4" mt="4>Learn more</button>
      </div>
      <img src={image} />
    </section>
  )
}
 CopyCopy

参考表

Reflexjs 会将所有 CSS 属性设为样式属性。下面可以参看最常用的样式属性参考。

边距和内边距

// `margin-left` and `margin-right` to `auto`
// `padding` to `theme.space[4]`
<div mx="auto" p="4" />
 CopyCopy

颜色

// `color` to `theme.colors.text`
// `background-color` to `theme.colors.primary`
<button color="text" bg="primary" />
 CopyCopy

排版

// `font-family` to `theme.fonts.body`
// `font-size` to `theme.fontSizes.md`
<p fontFamily="body" fontSize="md" />
 CopyCopy

宽度、高度和显示

// `width` to `100px`
// `height` to `120px`
<div w="100" h="120" />

// `width` and `height` to `10px`
<div size="10px" />
 CopyCopy

Flexbox

import { Flex } from "reflexjs"

<Flex alignItems="center" justifyContent="center" />

// or

<div display="flex" alignItems="center" justifyContent="center" />
 CopyCopy

网格

import { Grid } from "reflexjs"

// `grid-template-columns` to `1fr 1fr`
// `grid-gap` to `theme.space[4]`
<Grid col="2" gap="4" />

// or

<div display="grid" col="2" gap="4" />
 CopyCopy

背景

// `background-color` to `theme.colors.primary`
// `background-image` to `url('/images/pattern.jpg')`
<div bg="primary" backgroundImage="url('/images/pattern.jpg')" />
 CopyCopy

边框

// `border-bottom-width` to `1px`
// `border-radius` to `theme.radii.lg`
<div borderBottomWidth="1px" rounded="lg" />
 CopyCopy

位置

// `position` to `absolute`
// `top` to `theme.space[4]`
<div position="absolute" top="4" />
 CopyCopy

阴影

// `text-shadow` to `1px 1px #000`
// `box-shadow` to `theme.shadows.xl`
<div textShadow="1px 1px #000" boxShadow="xl" />
 CopyCopy

其他属性

还支持其他所有 CSS 属性，例如 animation、transform、cursor。