材质 UI 和网格系统
IT技术
reactjs
material-design
material-ui
grid-system
2021-03-25 22:52:34
6个回答
从材料设计规范的描述：
网格列表是标准列表视图的替代方案。网格列表不同于用于布局和其他视觉呈现的网格。
如果您正在寻找一个轻量级的 Grid 组件库，我正在使用React-Flexbox-Grid，它是flexboxgrid.cssReact 中的实现。
最重要的是，React-Flexbox-Grid与material-ui和react-toolbox（替代材料设计实现）配合得很好。
我四处寻找答案，我发现最好的方法是在不同的组件上使用 Flex 和内联样式。
例如，要使两个纸组件将我的全屏分成 2 个垂直组件（比例为 1:4），以下代码可以正常工作。
const styles = {
div:{
display: 'flex',
flexDirection: 'row wrap',
padding: 20,
width: '100%'
},
paperLeft:{
flex: 1,
height: '100%',
margin: 10,
textAlign: 'center',
padding: 10
},
paperRight:{
height: 600,
flex: 4,
margin: 10,
textAlign: 'center',
}
};
class ExampleComponent extends React.Component {
render() {
return (
<div>
<div style={styles.div}>
<Paper zDepth={3} style={styles.paperLeft}>
<h4>First Vertical component</h4>
</Paper>
<Paper zDepth={3} style={styles.paperRight}>
<h4>Second Vertical component</h4>
</Paper>
</div>
</div>
)
}
}
现在，通过更多计算，您可以轻松地在页面上划分组件。
我希望现在给出回应还为时不晚。
我也在寻找一个简单、健壮、灵活且高度可定制的引导程序，如react网格系统，以在我的项目中使用。
我所知道的最好的是react-pure-grid https://www.npmjs.com/package/react-pure-grid
react-pure-grid 使您能够自定义网格系统的各个方面，同时它内置了可能适合任何项目的默认值
用法
npm install react-pure-grid --save
——
import {Container, Row, Col} from 'react-pure-grid';
const App = () => (
<Container>
<Row>
<Col xs={6} md={4} lg={3}>Hello, world!</Col>
</Row>
<Row>
<Col xsOffset={5} xs={7}>Welcome!</Col>
</Row>
</Container>
);
我的方法是访问http://getbootstrap.com/customize/并只检查“网格系统”进行下载。下载的文件中有bootstrap-theme.css和bootstrap.css，我只需要后者。
通过这种方式，我可以使用 Bootstrap 的网格系统，以及 Material UI 中的所有其他内容。