目录
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
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
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> ;
}