react-stylex-wrapper

1.1.0 • Public • Published

react-stylex-wrapper

本库封装了常用的dom标签,在原有的基础上增加了 stylex属性,用来替换stylex.props的参数(多个参数就用数组)

features

  • 提供了StylexProvider, 方便切换主题以及通用样式
  • 提供了View, Text, Image, Button, Input, Form, Label, Select, TextArea等常用组件
  • 提供了stylexWrapperHoc高阶组件,用来拓展更多dom标签(欢迎PR)
  • 支持 stylexclassName, style混写,优先级为className < stylex < < style

usage

import { Button, StylexProvider, Text, View } from 'react-stylex-wrapper'
import { useState } from 'react'
import { styles } from './styles'
import { dracula, dracula2 } from './theme'
import './demo3.css'

export default function Demo3() {
  const [theme, setTheme] = useState(dracula2)

  return (
    <StylexProvider theme={theme}>
      <View stylex={styles.wrapper} className="demo3-border" style={{ borderRadius: 20 }}>
        <Text stylex={[styles.text('orange'), styles.size]}>Demo3</Text>
        <Button onClick={() => setTheme(theme === dracula2 ? dracula : dracula2)}>切换主题</Button>
      </View>
    </StylexProvider>
  )
}

支持的组件如下:

组件 dom
View div
Text span
Image img
Button button
Input input
Form form
Label label
Select select
TextArea textarea

Dependencies (0)

    Dev Dependencies (4)

    Package Sidebar

    Install

    npm i react-stylex-wrapper

    Weekly Downloads

    0

    Version

    1.1.0

    License

    ISC

    Unpacked Size

    44.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • lf7817