material-ui
文章平均质量分 66
crayon-shin-chan
这个作者很懒,什么都没留下…
展开
-
记一个material-ui自定义断点在down方法下无效问题
1.简介添加了自定义断点const theme = createTheme({ breakpoints: { values: { web: 1100 }, },});使用down方法 [theme.breakpoints.down("web")]: { paddingTop: "50px", },最后发现媒体查询没有生效,实际上并没有生成媒体查询2.解决material-ui的down方法..原创 2021-07-19 21:55:44 · 220 阅读 · 0 评论 -
material-ui入门之定制化Breakpoints
文档:https://material-ui.com/zh/customization/breakpoints/1.默认断点每个断点(一个键)匹配了一个固定的屏幕宽度(一个值):** xs, ** 超小:0px ** sm, **小:600px ** md, **中等:960px ** lg, **大:1280px ** xl, **超大:1920px这些断点值用于确定断点范围。 一个断点范围包含了起始的断点值,不包含终止的断点值。value |0px原创 2021-07-19 21:49:38 · 240 阅读 · 0 评论 -
material-ui实战之自动生成插值CSS响应式样式
1.简介做响应式开发时,一般都会使用多个断点来设置线性增加的cs样式但是有时候material-ui默认提供的断点也不能满足需求,可能需要更多的断点来使页面变化更为平滑基本上给定了端点值之后,中间断点的值都是线性增加的,比如给定页面范围1300px-1600px,元素宽度范围400px-800px,则最终的断点插值为:页面宽度为0px-1300px,元素宽度为400px 页面宽度为1300px-1400px,元素宽度为500px 页面宽度为1400px-1500px,元素宽度为6..原创 2021-07-16 23:52:42 · 328 阅读 · 0 评论 -
next.js入门之集成material-ui
地址:https://github.com/mui-org/material-ui原创 2021-06-20 15:43:43 · 823 阅读 · 0 评论 -
material-ui入门之Button按钮组件
文档:https://material-ui.com/zh/components/buttons/1.简介按钮传达了一系列用户可以执行的操作命令。 他们通常直接放置在您的用户界面中2.ButtonBaseButtonBase包含尽可能少的样式。它旨在成为创建按钮的简单构建块。它包含大量样式重置和一些焦点/波纹逻辑。import ButtonBase from '@material-ui/core/ButtonBase';// orimport { Butto...原创 2021-06-05 18:04:03 · 484 阅读 · 0 评论 -
material-ui入门之Grid List(网格列表)组件
文档:https://material-ui.com/zh/components/grid-list/1.简介网格列表在一个系统的网格中展示了一系列的图像。 网格列表展示了一个在重复的模式中的子集。 它们有助于提高对所持内容的视觉理解。2.Grid Listimport GridList from '@material-ui/core/GridList';// orimport { GridList } from '@material-ui/core'...原创 2021-06-05 17:17:29 · 1300 阅读 · 0 评论 -
material-ui入门之Grid栅格组件
文档:https://material-ui.com/zh/components/grid/1.简介Material Design 响应式布局的栅格可适应屏幕大小和方向,确保布局在不同尺寸之间的一致性。栅格既能够确保在不同布局下的一致性,同时也能够在众多不同设计中保持其灵活性。 Material Design 的响应式 UI 是基于 12 列的栅格布局。2.属性将ref被转发到的根元素。 提供的任何其他道具都将提供给根元素(原生元素)。3.CSS...原创 2021-06-05 16:48:05 · 1044 阅读 · 0 评论 -
material-ui入门之Box组件
文档:https://material-ui.com/zh/components/box/1.简介Box 组件能够封装您的组件。 它创建了一个新的 DOM 元素,默认情况下为<div>,并可以通过组件的属性进行更改。2.属性名称 类型 默认值 描述 children* union:node| func Box 渲染函数或者返回节点。 clone bool false 如果设置为tr...原创 2021-06-05 11:49:55 · 748 阅读 · 0 评论 -
记一个material-ui样式问题Warning: Prop `className` did not match.
1.问题在使用官方示例时,https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/sign-in遇到一个问题,官方代码全部粘贴过来后,样式不起作用,控制台报错:Warning: Prop `className` did not match. Server: "MuiAvatar-root MuiAvatar-circle makeStyles-avatar...原创 2021-06-02 20:30:18 · 1444 阅读 · 0 评论 -
material-ui入门之Container组件
文档:https://material-ui.com/zh/api/container/1.导入import Container from '@material-ui/core/Container';// orimport { Container } from '@material-ui/core';2.组件名称该MuiContainer名称可用于在主题级别提供默认道具或样式覆盖。3.属性Name Type Default ...原创 2021-05-31 23:00:02 · 491 阅读 · 0 评论