idea中material theme 不生效_世界上最受欢迎的 React UI 框架Material-UI

简介

Material-UI 组件是独立工作的。 它们是自我支持的，并只要注入它们需要显示的样式。 他们不依赖任何全局的样式表, 如 normalize.css. Material-UI目前稳定版本是v4.1.1，文档齐全，组件丰富稳定，开源团队赞助商强大，github star 48K+, Fork 数量有10K+,，支持响应式, seo友好, 支持服务器端render，reactjs 技术栈同学"居家旅行必备"啊。

快速开始

下面是来帮助您入门的一个快速示例，*而这真的是您需要的所有操作 *：

import React from 'react';import ReactDOM from 'react-dom';import Button from '@material-ui/core/Button';function App() { return (  你好，世界  );}ReactDOM.render(, document.querySelector('#app'));

是的，这就是您开始使用所需的一切，截图如下：

全局变量

您能够注意到，有一些重要的全局变量，可以改善 Material-UI 的用户体验。

• 全局CSS

当配置变量不够强大的时候，您可以使用theme的overrides来让Material-UI隐式地为您注入样式规则。 这是一个非常强大的特性。

const theme = createMuiTheme({ overrides: { MuiButton: { // 组件的名称 ⚛ / 样式表 text: { // 规则的名称 color: 'white', // 一些CSS }, }, },});

• 全局默认属性

你可以改变Material-UI所有组件的默认属性。在theme上有一个键值props是用来作这个用途的。

const theme = createMuiTheme({ props: { // Name of the component ⚛ MuiButtonBase: { // The default props to change disableRipple: true, // No more ripple, on the whole application ! }, },});

响应式元标记

Material-UI 是先在移动设备上开发的，我们采用了首先为移动设备编写代码，然后根据需要使用 CSS media queries(CSS媒体查询)扩展组件的策略。 如要确保所有设备的正确渲染和触摸缩放，请将响应式可视区域的元标记添加到您的

元素中。

CssBaseline

Material-UI 提供了可选的 CssBaseline 组件.

PS

世界上最欢迎的reactjs ui 框架不是我说的，官网上有图有真相。

LOGO