使用Material UI时borderRadius无法正常工作

Question

我在Web应用程序中使用ReactJS和Material-UI。当我为搜索栏定义道具搜索时，除了borderRadius之外，它都在工作。我检查了开发人员工具（F12）中的“样式”选项卡，border-radius属性已被覆盖，但搜索栏未更改。请帮助我。

我的代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';

import * as actions from './../actions/index';

import AppBar from '@material-ui/core/AppBar';
import Badge from '@material-ui/core/Badge';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import InputBase from '@material-ui/core/InputBase';
import { fade } from '@material-ui/core/styles/colorManipulator';

import MenuIcon from '@material-ui/icons/Menu';
import MailIcon from '@material-ui/icons/Mail';
import HomeIcon from '@material-ui/icons/Home';
import QuestionIcon from '@material-ui/icons/QuestionAnswer';
import CartIcon from '@material-ui/icons/ShoppingCart';
import PersonIcon from '@material-ui/icons/Person';
import SearchIcon from '@material-ui/icons/Search';

const styles = theme => ({
    root: {
        width: '100%',
    },
    grow: {
        flexGrow: 1,
    },
    appBar: {
        zIndex: 1300,
    },
   //search props for search bar
    search: {
        position: 'relative',
        borderRadius: theme.shape.borderRadius,
        backgroundColor: fade(theme.palette.common.white, 0.15),
        '&:hover': {
            backgroundColor: fade(theme.palette.common.white, 0.25),
        },
        marginRight: theme.spacing.unit * 2,
        marginLeft: 0,
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            marginLeft: theme.spacing.unit * 3,
            width: 'auto',
        },
    },
    searchIcon: {
        width: theme.spacing.unit * 9,
        height: '100%',
        position: 'absolute',
        pointerEvents: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    inputRoot: {
        color: 'inherit',
        width: '100%',
        backgroundColor: '#EAE9E8'
    },
    inputInput: {
        paddingTop: theme.spacing.unit,
        paddingRight: theme.spacing.unit,
        paddingBottom: theme.spacing.unit,
        paddingLeft: theme.spacing.unit * 10,
        transition: theme.transitions.create('width'),
        width: '100%',
        [theme.breakpoints.up('md')]: {
            width: 200,
        },
    },
})


class Header extends Component {
    onToggleNav = () => {
        this.props.onToggleNav()
    }
    render() {
        const { classes } = this.props;
        return (
            <header className={classes.root}>
                <AppBar color="inherit" className={classes.appBar}>
                    <Toolbar>
                        <IconButton color="inherit" className={"remove_outline"} onClick={this.onToggleNav}>
                            <MenuIcon />
                        </IconButton>
                        <Typography variant="h6" color="inherit" noWrap>
                            Watch Shop
                        </Typography>
                       {/* search bar */}
                        <div className={classes.search}>
                            <div className={classes.searchIcon}>
                                <SearchIcon />
                            </div>
                            <InputBase
                                placeholder="Search…"
                                classes={{
                                    root: classes.inputRoot,
                                    input: classes.inputInput,
                                }}
                            />
                        </div>
                        <div className={classes.grow} />
                        <div>
                            <Tooltip title="Trang chủ">
                                <IconButton className="remove_outline">
                                    <HomeIcon />
                                </IconButton>
                            </Tooltip>
                            <Tooltip title="Hỗ trợ">
                                <IconButton className="remove_outline">
                                    <QuestionIcon />
                                </IconButton>
                            </Tooltip>
                            <Tooltip title="Phản hồi">
                                <IconButton className="remove_outline">
                                    <MailIcon />
                                </IconButton>
                            </Tooltip>
                            <Tooltip title="Tài khoản">
                                <IconButton className="remove_outline">
                                    <PersonIcon />
                                </IconButton>
                            </Tooltip>
                            <Tooltip title="Giỏ đồ">
                                <IconButton className="remove_outline">
                                    <Badge badgeContent={4} color="secondary">
                                        <CartIcon />
                                    </Badge>
                                </IconButton>
                            </Tooltip>
                        </div>
                    </Toolbar>
                </AppBar>
            </header>
        );
    }
}

const mapDispatchToProps = (dispatch, props) => {
    return {
        onToggleNav: () => {
            dispatch(actions.isShowNav())
        }
    }
}

export default connect(null, mapDispatchToProps)(withStyles(styles)(Header));

开发人员工具中的样式标签

Style tab in the Developer Tools

搜索栏： Search bar