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>;
}
相关推荐
记得早睡~3 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
安分小尧4 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员4 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪5 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya5 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81635 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef065 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪5 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
加瓦点灯5 小时前
观察者模式:解耦对象间的依赖关系
开发语言·javascript·观察者模式
z_mazin6 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫