Reactjs 如何删除<;中的白色背景;p>;要素

Reactjs 如何删除<;中的白色背景;p>;要素,reactjs,material-ui,react-hooks,Reactjs,Material Ui,React Hooks,我正在使用Material UI扩展面板组件,在添加display:flex后,它将显示白色背景。图片: 我只想显示面板 父组件 const useStyles = makeStyles(theme => ({ root: { display: 'flex', flexDirection: 'column' }, appBar: { background: "#ebe7dd" }, menu: { color: "#D7D0CE",

我正在使用Material UI扩展面板组件,在添加
display:flex
后,它将显示白色背景。图片:

我只想显示面板

父组件

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column'

  },
  appBar: {
    background: "#ebe7dd"
  },
  menu: {
    color: "#D7D0CE",
  },
  toolbar: {
    // flexGrow: 1
  },
  topLeft: {
    // flex: 50,
  },
  para: {
    padding: "0.5%",
    // opacity: '0'
  }
}));

    <div className={classes.root}>
      <p className={classes.para}>
        {/* <CssBaseline /> */}
        <AppBar
          position="fixed"
          className={`${classes.root} ${classes.appBar}`}
        >
          <Toolbar className={classes.toolbar}>
            <IconButton
                aria-label="open drawer"
                edge="end"
                onClick={toggleDrawer('left', true)}
                className={classes.topLeft}
              >
                <IoIosMenu className={classes.menu} />
              </IconButton>
          </Toolbar>
        </AppBar>
        <Drawer open={state.left} onClose={toggleDrawer('left', false)}>
          <SideBar />
        </Drawer>
      </p>  
      <p className={classes.para}> 
        <NewsFeedCard />
      </
const useStyles=makeStyles(主题=>({
根目录:{
显示:“flex”,
flexDirection:“列”
},
appBar:{
背景:“ebe7dd”
},
菜单:{
颜色:“D7D0CE”,
},
工具栏:{
//flexGrow:1
},
左上角:{
//弹性:50,
},
第段:{
填充:“0.5%”,
//不透明度:“0”
}
}));

{/* */}

({ 根目录:{ 宽度:“35%”, 浮动:“对”, }, 详情:{ 对齐项目:“中心” }, 专栏:{ flexBasis:“33.33%。” }, 助手:{ borderLeft:`2px solid${theme.palete.divider}`, 填充:主题。间距(1,2) }, 链接:{ 颜色:theme.palete.primary.main, 文本装饰:“无”, “&:悬停”:{ 文本装饰:“下划线” } } })


添加
背景色:透明到所选元素。例如:

p{
 background-color: transparent;
}
您也可以使用
!重要信息
强制覆盖样式

p{
 background-color: transparent !important;
}
注意:将样式应用于
,将应用于组件中的所有
标记。按父包装器、Id或类名将
标记作为目标。例:

#header p{ background-color: transparent; }
使用react-js

给段落标记一个类名,并在css中定位它

例如

这应该会有所帮助

#header p{ background-color: transparent; }
 <p className='paragraph-one'>
 This is my paragraph with a transparent     
 background!</p>
 .paragraph-one{
 background-colour: transparent;
 }