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>;
}
相关推荐
小吕学编程17 分钟前
ES练习册
java·前端·elasticsearch
Asthenia041224 分钟前
Netty编解码器详解与实战
前端
袁煦丞29 分钟前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛1 小时前
vue组件间通信
前端·javascript·vue.js
一笑code2 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19702 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴2 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript
GetcharZp2 小时前
xterm.js 终端神器到底有多强?用了才知道!
前端·后端·go