目录
- [qiankun 实现主应用与子应用样式隔离](#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>;
}