盒子的样式在 React JS 中不起作用

Question

我正在使用 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>
        </>
    )
}

Answer 1

尝试：

const singleBox = {
  border: 3,
  borderColor: "black",
  borderStyle: "dashed",
  borderRadius: 16
};
......
<Box css={singleBox}>

参考：https://material-ui.com/system/basics/#css-property

盒子的样式在 React JS 中不起作用

Style of the Box doesn't work in React JS

javascript

css

reactjs

box