本文主要是介绍qiankun实现基座、子应用样式隔离,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
目录
- qiankun 实现主应用与子应用样式隔离
- 使用CSS-in-JS来实现样式隔离
- react-jss
- styled-components
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
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
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>;
}
这篇关于qiankun实现基座、子应用样式隔离的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!