Question

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

import {StyleSheet} from 'aphrodite/no-important';

const GLOBALS = '__GLOBAL_STYLES__';
const globalExtension = {
    selectorHandler: (selector, baseSelector, generateSubtreeStyles) => (baseSelector.includes(GLOBALS) ? generateSubtreeStyles(selector) : null),
};
const extended = StyleSheet.extend([globalExtension]);

export default function () {
    const styles = extended.StyleSheet.create({
        [GLOBALS]: {
            '*:focus': {
                boxShadow: "none",
                outline: "none",
            },

            'textarea:disabled, input:disabled' : {
                backgroundColor: "transparent",
            },

            'marker': {
                display: "block !important",
                position: "relative  !important",
                height: "50px  !important",
                width: "50px  !important"            
            }, 

            ".form-control:focus, .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus, .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus" : {
                boxShadow: "none"
            },

            '.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link' : {
                color:'inherit',
                backgroundColor:'inherit',
                border:'none'
            },
            'a, a:hover' : {
                color:'inherit'
            }
        },
    });

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

P.s-我正在使用Razzle进行SSR的反应。

阿芙罗狄蒂全球CSS无法进行生产构建

0 个答案: