react-jss书写样式

目录

react-jss的使用

  • 实现组件化样式、动态样式、避免样式冲突
js 复制代码
npm install react-jss
yarn add react-jss
js 复制代码
// 使用
import React from 'react';
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  myButton: {
    color: 'green',
    margin: {
      top: 5,
      right: 0,
      bottom: 5,
      left: 0,
    },
    '& span': {
      fontWeight: 'bold',
    },
  },
});

function MyComponent() {
  const classes = useStyles();
  return <button className={classes.myButton}>Submit<span>Button</span></button>;
}
相关推荐
麦兜*1 分钟前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
Jinkxs2 分钟前
JavaScript性能优化实战技术
开发语言·javascript·性能优化
知了一笑11 分钟前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室1 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~1 小时前
重学前端004 --- html 表单
前端·html
TE-茶叶蛋1 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
Maybyy1 小时前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈1 小时前
CSS中的Element语法
前端·css
Real_man1 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中1 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts