qiankun实现基座、子应用样式隔离

目录

qiankun 实现主应用与子应用样式隔离

  • qiankun 之中默认的样式隔离是针对子应用与子应用之间的。至于主应用的样式会影响到子应用,若需要,则需要配置进行隔离
  • 解决方法:
    1:每个应用的样式使用固定的格式 eg:react 项目=> react-memu 不推荐
    2: 通过 css-modules 的方式给每个应用自动加上前缀
    3: 使用CSS-in-JS来实现样式隔离 ( 推荐 )

使用CSS-in-JS来实现样式隔离

  • 使用react-jss 或者 styled-components都可以实现样式隔离

react-jss

  • cnpm i 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>;
}

styled-components

  • cnpm i styled-components
js 复制代码
import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
  .div {
    color: red
  }
`;

function MyComponent() {
  return <Container>
    My Component
    <div className="div">color</div>
  </Container>;
}
相关推荐
嘗_15 分钟前
暑期前端训练day5
前端
uncleTom66622 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥25 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF35 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man37 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬39 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C42 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
盏茶作酒291 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js