如何设置从UI框架导入的React-component的CSS文件的样式

时间:2016-07-13 08:05:21

标签: javascript css reactjs material-design

我正在评估使用React构建一个相当大的应用程序,我是React哲学的新手(我来自Css + Js + jQuery old-school)

我需要的一件事是实现Google Material Design的优秀UI框架。我读了很多关于React和一些MD框架有问题的stackoverflow线程。 我发现使用经典的UI框架,我的意思是不是为React设计的,不是一个好的解决方案,因为这样的框架会改变DOM,这可能会与React事件管理器冲突等等。因此,似乎正确的方法是使用由React组件构成的UI框架。

我尝试了其中一些(材料-ui,react-toolbox,精华......)但对我来说新的(和令人惊讶的)是我只能改变一些“主题”,让我们说“光主题” “或”黑暗主题“。或者我可以通过JS导入导入一些主题,然后调用类似

的东西
$color-primary: $palette-blue-500;

改变一些颜色。 但这还不够。我需要一个完整的可编辑CSS ,或者至少要了解所有CSS类层次结构,并且可以自由地覆盖这些类。

这不可能吗? 这是否意味着如果我需要完全可自定义的组件,这是错误的方式? 或者我错过了提供这个机会的“正确”的图书馆?

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:0)

每个React ui框架都提供了添加自己的类和样式的方法 使用类似className的道具

<md-toolbar className="yourclassNames"/>

绝对可以覆盖主题中的主要颜色等顶级变量。很有可能进行自定义,您只需创建自己的css文件并添加所需的样式。

有时使用这些库你可能需要使用!important,因为这些库在内联样式上做了很多工作