不适用于React的生产版本

时间:2018-11-22 08:13:47

标签: reactjs aphrodite

在生产版本的React中使用阿芙罗狄蒂时,样式扩展不能很好地工作。 有些导出的样式是Object

我找不到解决这个问题的方法。

环境

  • 阿芙罗狄蒂@ 0.5.6
  • React@16.4.1
  • TypeScript@2.7.1

代码

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:...

0 个答案:

没有答案