如何使用样式化的组件和SASS对材料ui下一组件进行样式 [英] How to style material ui next components with styled components and SASS

查看:79
本文介绍了如何使用样式化的组件和SASS对材料ui下一组件进行样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们要在应用程序中使用材料ui next组件,在该组件中,我们将样式化组件与SASS一起使用.为此,我们使用webpack和raw-loader导入生成的CSS并应用如下样式:

We want to use the material ui next components in our application where we're using styled components with SASS. To achieve this we use webpack and a raw-loader to import the generated CSS and apply the styles like so:

const sidebarStyles = require('./Sidebar.sass');

const StyledDrawer = styled(Drawer)`
    ${sidebarStyles}
    `

我们正在尝试这种方法,因为样式化的组件似乎是对React组件进行样式设计的一种好方法,但是我们想使用常规的sass文件,以便我们的设计人员可以像普通样式一样创建样式,而不必编写css-in-js.

We're trying this approach because styled components seem like a good method for styling react components, but we want to use regular sass files so our designers can create the styles like normal, without having to write css-in-js.

现在,我在使用材质ui组件时面临的问题是,许多组件都有子组件(例如Drawer组件的子组件是Paper组件),而我正在努力寻找一种使用我们的方法来样式化它们的好方法-我知道推荐的方法是使用prop类:

Now the issue I'm facing with material ui components is that many components have children (e.g. the Drawer component has a Paper component as its child) and I'm struggling to find a good way to style those with our approach - I know the recommended way is to use the classes prop:

const styles = theme => ({
    drawerPaper: {
        width: 250
    }
});

classes={{
    paper: classes.drawerPaper,
}}

但这与我们从外部.sass文件中将样式作为文本导入的要求不符.

But this doesn't work with our requirement to import the styles as text from an external .sass file.

这完全有可能吗,什么是最好的方法?

Would this even be possible at all and what would be the best way?

推荐答案

您应该能够将类的名称从sass文件传递到classes对象.

You should be able to pass the name of the class from your sass file to the classes object.

classes={{
  paper: `SASS_CLASS_NAME_HERE`,
}}

更多信息: https://material-ui-next .com/customization/overrides/#overriding-with-classes

这篇关于如何使用样式化的组件和SASS对材料ui下一组件进行样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆