在生产版本的React中使用阿芙罗狄蒂时,样式扩展不能很好地工作。
有些导出的样式是Object
。
我找不到解决这个问题的方法。
import { StyleSheet } from 'aphrodite/no-important'
const GLOBALS = '__GLOBAL_STYLES__'
const globalExtension = {
selectorHandler: (selector: string, baseSelector: string, generateSubtreeStyles: any) =>
baseSelector.includes(GLOBALS) ? generateSubtreeStyles(selector) : null)
}
// @ts-ignore
const extended = StyleSheet.extend([globalExtension])
// normalize
const styles = extended.StyleSheet.create({
[GLOBALS]: {
html: {
...styles...
},
}
})
export default extended.css(styles[GLOBALS])
html{height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-
style:scrollbar;-webkit-tap-highlight-color:transparent;}body{height:100%;font-size:1rem;font-
family:"Gotham SSm A","Gotham SSm B",-apple-system,BlinkMacSystemFont,Hiragino Sans,"Hiragino
Kaku Gothic ProN","Original Yu Gothic","Yu Gothic",Meiryo,sans-serif;font-
weight:normal;margin:0px;text-align:left;background-color:white;color:#3B434B;overflow-
y:scroll;}#main{height:100%;}*, *::before, *::after{-moz-box-sizing:border-box;box-sizing:border-
box;}h1, h2, h3, h4, h5, h6{line-height:1.25;margin:0px;margin-bottom:1em;}ul{list-
style:none;padding:0px;margin:0px;}p{font-size:.875rem;line-height:1.75;margin:0px;margin-
bottom:1em;}@media (min-width: 992px){p{font-size:1rem;}}a{text-decoration:none;}a,
button{outline:none;}table{border-collapse:collapse;}img{vertical-align:middle;}
._ul6ryz{html:[object Object];body:[object Object];#main:[object Object];*, *::before, *::after:[object
Object];h1, h2, h3, h4, h5, h6:[object Object];ul:[object Object];p:[object Object];a:[object Object];a,
button:[object Object];table:[object Object];img:[object Object];}._1owj03d{background-
image:url("/assets/images/backgrounds/onbord.jpg") !important;}.om:...