0

是否可以避免在使用 material-ui 样式的（服务器生成的）页面中重复类定义？

在我的 Next.js / Material-UI 应用程序中，我有一个全局styles.ts文件，例如：

export const styles = (theme) => createStyles({
    myButton: {
        '&:hover': { color: '#ff0' },
        '&.active': { color: '#f00' },
        fontSize: '1.23rem'
    }
});

构建后，生成的页面包含使用此样式的每个组件实例的此样式定义的一个“副本”，例如：

<style id="jss-server-side">
    .myButton-1 { font-size: 1.23rem; }
    .myButton-1:hover { color: #ff0; }
    .myButton-1.active { color: #f00; }
    
    .myButton-2 { font-size: 1.23rem; }
    .myButton-2:hover { color: #ff0; }
    .myButton-2.active { color: #f00; }
    
    ...
</style>

我已经使用jss-plugin-global尝试了这种方法，它删除了后缀编号，但仍将副本插入到文件中，例如：

// styles.ts
export const styles = (theme) => createStyles({
    '@global': {
        '.myButton': {
            '&:hover': { color: '#ff0' },
            '&.active': { color: '#f00' },
            fontSize: '1.23rem'
        }
    }
}

// output:
<style id="jss-server-side">
    .myButton { font-size: 1.23rem; }
    .myButton:hover { color: #ff0; }
    .myButton.active { color: #f00; }
    
    .myButton { font-size: 1.23rem; }
    .myButton:hover { color: #ff0; }
    .myButton.active { color: #f00; }
    
    ...
</style>
4

0 回答 0