ui-box是一种低级别的CSS-in-JS解决方案，专注于简单，快速和可扩展

📦
ui-box is a low level CSS-in-JS solution that focuses on being simple, fast and extensible. All CSS properties are set using simple React props, which allows you to easily create reusable components that can be enhanced with additional CSS properties. This is very useful for adding things like margins to components, which would normally require adding non-reusable wrapper elements/classes.

API

Box (default export)

is

Type: string or React component type Default: 'div'

Lets you change the underlying element type. You can pass either a string to change the DOM element type, or a React component type to inherit another component. The component just needs to accept a className prop to work. A good example is inheriting the react-router Link component. E.g:

<Boxis={Link}to="/login">Login</Box>

innerRef

Type: function

Callback that gets passed a ref to inner DOM node (or component if the is prop is set to a React component type).

clearfix

Type: boolean

Utility property for easily adding clearfix styles to the element.

className

Type: string

The className prop you know and love. Internally it gets enhanced with additional class names for the CSS properties you specify.

CSS properties

All of these CSS properties are support. You can pass either a string or a number (which gets converted to a px value). The shorthand properties with repeated values only accept a single value, e.g. margin="10px" works but margin="10px 20px" does not. You can use the x/y props (e.g. marginX/marginY) to achieve the same thing.

alignContent

alignItems

alignSelf

background

backgroundBlendMode

backgroundClip

backgroundColor

backgroundImage

backgroundOrigin

backgroundPosition

backgroundRepeat

backgroundSize

border

borderBottom

borderBottomColor

borderBottomLeftRadius

borderBottomRightRadius

borderBottomStyle

borderBottomWidth

borderColor

borderLeft

borderLeftColor

borderLeftStyle

borderLeftWidth

borderRadius

borderRight

borderRightColor

borderRightStyle

borderRightWidth

borderStyle

borderTop

borderTopColor

borderTopLeftRadius

borderTopRightRadius

borderTopStyle

borderTopWidth

borderWidth

bottom

boxShadow

boxSizing - Set to border-box by default.

clear

color

columnGap

cursor

display

flex

flexBasis

flexDirection

flexFlow

flexGrow

flexShrink

flexWrap

float

font

fontFamily

fontSize

fontStyle

fontVariant

fontWeight

gap

grid

gridArea

gridAutoColumns

gridAutoFlow

gridAutoRows

gridColumn

gridColumnEnd

gridColumnGap

gridColumnStart

gridGap

gridRow

gridRowEnd

gridRowGap

gridRowStart

gridTemplate

gridTemplateAreas

gridTemplateColumns

gridTemplateRows

height

justifyContent

justifyItems

justifySelf

left

letterSpacing

lineHeight

listStyle

listStyleImage

listStylePosition

listStyleType

margin

marginBottom

marginLeft

marginRight

marginTop

marginX - Sets marginLeft and marginRight to the same value.

marginY - Sets marginTop and marginBottom to the same value.

maxHeight

maxWidth

minHeight

minWidth

opacity

order

overflow

overflowX

overflowY

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

paddingX - Sets paddingLeft and paddingRight to the same value.

paddingY - Sets paddingTop and paddingBottom to the same value.

placeContent

placeItems

placeSelf

pointerEvents

position

right

rowGap

textAlign

textDecoration

textOverflow

textShadow

textTransform

top

transform

transformOrigin

transition

transitionDelay

transitionDuration

transitionProperty

transitionTimingFunction

userSelect

visibility

whiteSpace

width

wordBreak

wordWrap

zIndex

Other props

All other props passed through to the underlying DOM element / React component.

extractStyles()

Returns a { cache, styles } object which contains the cache entries and rendered styles for server rendering. The styles can be output in a <style> tag or an external stylesheet (however you want). The cache should be passed to hydrate() on the client-side before mounting the app. Also useful for doing snapshot unit testing (make sure to call clearStyles() after each test though).

hydrate(cache)

Hydrates the cache using the cache value returned from extractStyles(). This is used to prevent needing to recalculate all the class names and re-render all the styles on page load when server rendering.

clearStyles()

Clears the cache and removes the rendered styles. Mainly useful for resetting the global state when using extractStyles() in unit tests.

splitProps(props, keys)

Utility function for filtering out props based on an array of keys. Returns an { matchedProps, remainingProps } object.

props

propTypes

propNames

propAliases

propEnhancers

Object of all the CSS property enhancers (the methods that generate the class name and styles for each property).

Enhancer groups

These enhancer groups are also exported. They're all objects with { propTypes, propAliases, propEnhancers } properties. They're mainly useful for if you want to inherit a subset of the Box CSS propTypes in your own components.