Полная ширина материала-кнопки в бейдж? - PullRequest
Новая
       8

Полная ширина материала-кнопки в бейдж?

0 голосов
/ 14 сентября 2018

У меня есть кнопка внутри сетки, и я использовал fullWidth, чтобы расширить ее, чтобы заполнить контейнер.

Это работало нормально, пока я не завернул его в значок. Теперь свойство fullWidth игнорируется, а кнопка имеет ширину по умолчанию.

Работает нормально: 

<Button variant={"outlined"} color={"secondary"} fullWidth>
    Todo
</Button>

Сейчас не работает: 

<Badge badgeContent={4} color={"secondary"}>
    <Button variant={"outlined"} color={"secondary"} fullWidth>
        Todo
    </Button>
</Badge>

Как мне заставить кнопку развернуться, чтобы заполнить ее родитель? 

import React, {Component} from 'react';
import Grid from "@material-ui/core/Grid/Grid";
import Button from "@material-ui/core/Button/Button";
import Badge from "@material-ui/core/Badge/Badge";


export default class App extends Component {
    render() {
        return (

            <Grid container style={{margin: 10}}>
                <Grid item xs={2}>

                    <Badge badgeContent={4} color={"secondary"}>
                        <Button variant={"outlined"} color={"secondary"} fullWidth>
                            Todo badge
                        </Button>
                    </Badge>

                    <Button variant={"outlined"} color={"secondary"} fullWidth>
                        Todo no badge
                    </Button>
                </Grid>
                <Grid item xs={10}>

                </Grid>
            </Grid>
        );
    }
};

Ответы [ 2 ]

0 голосов
/ 15 сентября 2018

Я мог бы придумать решение, используя свойство ширины CSS:

вот мой ответ: 

const styles = theme => ({
  margin: {
    margin: theme.spacing.unit * 2,
    width: '100%'
  }
});

function SimpleBadge(props) {
  const { classes } = props;
  return (
    <Grid container>
      <Grid item xs={11}>
      <Badge color="primary" badgeContent={4} className={classes.margin} >
        <Button variant="contained" fullWidth>Button</Button>
      </Badge>

      </Grid>
    </Grid>
  );
}

найдите, что я использовал width: '100%' в стилях значков.

вот рабочий пример: https://codesandbox.io/s/wqm9kmxmql

надеюсь, это поможет вам.

0 голосов
/ 14 сентября 2018

Вы должны применить свойство fullWidth к значку 

<Badge badgeContent={4} color={"secondary"} fullWidth>
    <Button variant={"outlined"} color={"secondary"}>
        Todo
    </Button>
</Badge>
...