Btukfyl

I have a class in React which uses an input field which is part of the website header:

If the input is invalid then I want to display a snackbar. I'm using Material-UI components.

The problem is I defined anchorOrigin to be center and top as per Material-UI API. However the snackbar takes up the whole screen width while I want it to only take up the top center location of the screen. My message is quite short, for example "Value invalid" but if it's longer then I should be able to use newlines. I'm not sure if there's some setting in Material-UI API to alter this (I couldn't find one) or I need to use CSS.

This is my code:

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>

    )

  }

}

I do not know if we can add some style to the component anchor origin field. I think the div needs to be managed using CSS. It's an anchor, not style.

<Snakbar 

   className = "my-snakbar"

   {/*All your other stuff*/}

   >

{//Stuff}

</Snakbar>

CSS

.my-snakbar {

  width: 200px;

  //Maybe use flexbox for positioning then

}

Let me know your thoughts

Daniel

Improved Answer

Code copied from origional question and modified

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;

Screen shot

enter image description here

Let me know if this helped

Daniel