网站开发实战视频,多语言网站开发,建设通账号,东城响应式网站建设目录 qiankun 实现主应用与子应用样式隔离使用CSS-in-JS来实现样式隔离react-jssstyled-components qiankun 实现主应用与子应用样式隔离
qiankun 之中默认的样式隔离是针对子应用与子应用之间的。至于主应用的样式会影响到子应用#xff0c;若需要#xff0c;则需要配置进行… 目录 qiankun 实现主应用与子应用样式隔离使用CSS-in-JS来实现样式隔离react-jssstyled-components qiankun 实现主应用与子应用样式隔离
qiankun 之中默认的样式隔离是针对子应用与子应用之间的。至于主应用的样式会影响到子应用若需要则需要配置进行隔离解决方法 1每个应用的样式使用固定的格式 egreact 项目 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}SubmitspanButton/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 ContainerMy Componentdiv classNamedivcolor/div/Container;
}
