Question

我在React中有一个类，它使用输入字段作为网站标题的一部分：

如果输入无效，那么我想显示一个小吃栏。我正在使用Material-UI组件。

问题是我按照Material-UI API将anchorOrigin定义为中心和顶部。但是，小吃店占据了整个屏幕的宽度，而我只希望它占据屏幕的顶部中心位置。我的信息很短，例如“值无效”，但是如果它更长，那么我应该可以使用换行符。我不确定Material-UI API中是否有某些设置可以更改此设置（我找不到）或需要使用CSS。

这是我的代码：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '@material-ui/core/InputBase';
import Snackbar from '@material-ui/core/Snackbar';
import SnackbarMessage from './SnackbarMessage.js';

const classes = theme => ({
  inputRoot: {
    color: 'inherit',
    width: '100%',
  },
  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('sm')]: {
      width: 120,
      '&:focus': {
        width: 200,
      },
    },
  }
});

class Test extends Component {
  state = {
    appId: '',
    snackBarOpen: false
  }

  render() {

    return (
      <div>
        <InputBase
          placeholder="Search…"
          classes={{
            root: classes.inputRoot,
            input: classes.inputInput,
          }}
          value={'test'} />
        <Snackbar
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'center'
        }}
        open={true}
        autoHideDuration={5000}
      >
        <SnackbarMessage
          variant="warning"
          message={"test message"}
        />
      </Snackbar>
      </div>
    )
  }
}

Answer 1

我不知道我们是否可以向组件锚点源字段添加一些样式。我认为div需要使用CSS进行管理。这是一个锚点，而不是风格。

<Snakbar 
   className = "my-snakbar"
   {/*All your other stuff*/}
   >
{//Stuff}
</Snakbar>

CSS

.my-snakbar {
  width: 200px;
  //Maybe use flexbox for positioning then
}

让我知道您的想法

丹尼尔

答案得到改善

从原始问题复制并修改的代码

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Snackbar from '@material-ui/core/Snackbar';

const classes = theme => ({
  inputRoot: {
    color: 'inherit',
    width: '100%',
  },
  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('sm')]: {
      width: 120,
      '&:focus': {
        width: 200,
      },
    },
  }
});

class ComingSoon extends Component {

  render() {

    const styles = {
      container: {
        position: "fixed",
        top: "0px",
        width: "100%",
        height: "30px"
      },
      snakbar: {
        background: "black",
        color: "white",
        width: "100px",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignContent: "center",
        margin: "0 auto"
      }
    };

    return (
      <div className = "snakbar-container" style = {styles.container}>
        <Snackbar
          className = "my-snakbar"
          style = {styles.snakbar}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'center'
          }}
          open={true}
          autoHideDuration={5000}
          >
            <span>My Message</span>
        </Snackbar>
      </div>
    )
  }
}

export default ComingSoon;

屏幕截图

enter image description here

让我知道这是否有帮助

丹尼尔

Answer 2

Material-UI将Snackbars设置为断点“ md”（600px）以下的完整视口宽度。您可以使用替代（https://material-ui.com/customization/overrides/）并将新值设置为组件API中描述的组件的默认CSS类（即https://material-ui.com/api/snackbar/）。因此，您可以按以下方式覆盖类anchorOriginTopCenter：

const styles = theme => ({
  anchorOriginTopCenter: {
    [theme.breakpoints.down('md')]: {
      top: "your value/function here",
      justifyContent: 'center',
    },
  },
  root: {
    [theme.breakpoints.down('md')]: {
      borderRadius: 4,
      minWidth: "your value / function here",
    },
  },
});

第一个对象将覆盖默认类{anchorOriginTopCenter}，第二个“根”将应用于小吃栏中的第一个元素（可能是“ div”）。

如何使用anchorOrigin使Material-UI Snackbar不能占据整个屏幕宽度？

2 个答案: