React 中的 JSS：创建非 css 模块

编程问答 2022-05-26

问题描述

我正在我的 React 应用程序中从 sass 转换为 jss。

我创建了 3 个 jss 样式：

  1. colors.js => 包含红色、蓝色、浅色、主色、警告等颜色定义。它将在其他 jss 文件中共享。
  2. control.js => 包含按钮、输入、搜索框等的通用样式定义。
  3. button.js => 包含从 control.js 扩展而来的按钮样式定义。

我希望 colors.js 将在 :root 级别呈现，而不是一个 css 模块。 而 control.js 和 button.js 成为 css 模块。

问题是 :root{ /*blah-blah*/ } 不会被渲染，因为 colors.js 不是反应组件，所以没有 <Color class={classes.blah}><Color>。 我希望 colors.js 在 js 中呈现为 css 而不是 css 模块。标准react app中的类比是这样的：

// import classes from 'control.js.css'; // i don't want this
import 'control.js.css'; // <== i want this

这是我的代码：

颜色.tsx

const styles = {
    ':root': {
        '--col-red': '#ff0000','--col-blue': '#0000ff','--col-dark': '#222222','--col-light': '#eeeeff'
    },red: 'var(--col-red)',blue: 'var(--col-blue)',dark: 'var(--col-dark)',light: 'var(--col-light)',}
export default styles;

control.tsx

import React,{ReactElement} from 'react';

import {createUseStyles} from 'react-jss'
import jss,{Classes} from 'jss';

import colors from './Colors';



const styles = {
    main: {
        background: colors.light,},disabled: {
        opacity: 0.5,cursor: 'not-allow',}
}
export {styles};
const useStyles = createUseStyles(styles);


function Styles<T extends string | number | symbol>(props: { styles: () => Classes<T>,children: (classes: Classes<T>) => ReactElement }) {
    const classes = props.styles();
    return props.children(classes);
}


export default class Control extends React.Component {
    render() {
        return (
            <Styles styles={useStyles}>{classes =>
                <div className={classes.main}>
                    abstract base control
                </div>
            }</Styles>
        );
    }
}

button.tsx

import React,{ReactElement} from 'react';

import jss,{Classes} from 'jss';
import {createUseStyles} from 'react-jss'

import Control,{styles as base_styles} from './Control';
import Color from './Colors';


const styles = {
    main: {
        extend: base_styles.main,color: Color.blue,disabled: {
        extend: base_styles.disabled
    }
}
const useStyles = createUseStyles(styles);

function Styles<T extends string | number | symbol>(props: { styles: () => Classes<T>,children: (classes: Classes<T>) => ReactElement }) {
    const classes = props.styles();
    return props.children(classes);
}


export default class Button extends Control {
    render() {
        return (
            <Styles styles={useStyles}>{classes =>
                <button className={classes.main}>
                    hello world
                </button>
            }</Styles>
        );
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jssmodulemodulereactjsreactjsreactjsreactjs