как убрать белый фон в элементе <p> - PullRequest
Новая
       7

как убрать белый фон в элементе <p>

0 голосов
/ 03 февраля 2020

Я использую компонент Material-UI Expansion-Panel и после добавления в display:flex отображается белый фон. Фото: https://imgur.com/fAmq9vU

Я хочу отобразить только панель.

Родительский компонент 

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(theme => ({
  root: {
    width: "35%",
    float: "right",
  },
  details: {
    alignItems: "center"
  },
  column: {
    flexBasis: "33.33%"
  },
  helper: {
    borderLeft: `2px solid ${theme.palette.divider}`,
    padding: theme.spacing(1, 2)
  },
  link: {
    color: theme.palette.primary.main,
    textDecoration: "none",
    "&:hover": {
      textDecoration: "underline"
    }
  }
})

    <div className={classes.root}>
      <ExpansionPanel defaultExpanded>
        <ExpansionPanelSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1c-content"
          id="panel1c-header"
        >
        </ExpansionPanelSummary>
        <ExpansionPanelDetails className={classes.details}>
        </ExpansionPanelDetails>
        <ExpansionPanelActions>
        </ExpansionPanelActions>
      </ExpansionPanel>
    </div

Ответы [ 2 ]

0 голосов
/ 03 февраля 2020

Использование реакции js

Присвойте тегу абзаца имя_класса и укажите его в своем css.

Например. 

 <p className='paragraph-one'>
 This is my paragraph with a transparent     
 background!</p>

Затем в css: 

 .paragraph-one{
 background-colour: transparent;
 }

Это должно помочь.

0 голосов
/ 03 февраля 2020

добавить background-color: transparent; к выбранному элементу. например: 

p{
 background-color: transparent;
}

Вы также можете использовать !important для принудительного переопределения стиля. 

p{
 background-color: transparent !important;
}

Примечание. Применение стиля к <p> будет применяться ко всем тегам <p> в компоненте. нацелить тег <p> по родительской оболочке, по идентификатору или имени класса. например: 

#header p{ background-color: transparent; }
...