Style of the Box doesn't work in React JS

Question

I'm creating a row with 3 boxes by using Grid and Row tag in React Js. When I followed the instruction on the internet to apply style for the Box tag, the interface didn't change at all. Please help me.

This is my code

This is a single cell which is created with 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

This is where that Box is used

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

try:

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

reference: https://material-ui.com/system/basics/#css-property