如何解决盒子的样式在 React JS 中不起作用
我正在使用 React Js 中的 Grid
和 Row
标记创建一个包含 3 个框的行。当我按照互联网上的说明为 Box
标签应用样式时,界面根本没有改变。请帮帮我。
这是我的代码
这是用 Box
import React,{useState,useEffect,Component} from 'react';
import Box from '@material-ui/core/Box';
import { borders } from '@material-ui/system';
import Grid from '@material-ui/core/Grid';
const singleBox = {
border: 3,borderColor: "black",borderRadius: 16,}
function SingleBox({props}) {
// console.log(props)
return(
<Grid item md = {4} >
<Box style = {singleBox}>
<p align = 'center'>{props.name}</p>
</Box>
</Grid>
)
}
export default SingleBox
这是使用 Box
的地方
const RestaurantReview = () => {
const people = [
{
name: 'Anna',age: 15
},{
name: 'Bob',age: 16
},{
name: 'Charles',age: 17
},]
const personRow = people.map(person => <SingleBox key = {person.name} props = {person} />)
return(
<>
<AppNavBar />
<Grid container>
{personRow}
</Grid>
</>
)
}
解决方法
试试:
const singleBox = {
border: 3,borderColor: "black",borderStyle: "dashed",borderRadius: 16
};
......
<Box css={singleBox}>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。