What is causing the action button in my MUI snackbar to occupy an additional line?

I'm currently learning how to use MUI and I'm struggling with a specific issue. The close button in my code is appearing on a separate line, but I want it to be on the same line as the word "again". I've tried experimenting with absolute positioning, but so far without success.

https://i.stack.imgur.com/7E0qB.png

...const action = (
    <>
      <IconButton
        size="small"
        aria-label="close"
        color="inherit"
        onClick={toggleMessage}
      >
        <CloseIcon fontSize="small" />
      </IconButton>
    </>
  )

  return (
    <>
      {message && (
        <Snackbar
          ContentProps={{
            sx: {
              backgroundColor: 'green',
              borderRadius: 0,
              width: '100vh',
            },
          }}
          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
          message={props.message}
          open={message}
          action={action}
        ></Snackbar>...
cssreactjsmaterial-uijsxsnackbar

Answer №1

<Snackbar
   // other properties
   ContentProps={{
      sx: {
         flexWrap: 'nowrap',       // <--- Include this new line
         // additional styles
         // To style the actions container, use the following:
         '& .MuiSnackbarContent-action': {
            // Customize button styles by adding:
               // css for actions container
               '& button': {
                  // css for button
               }
          }
      },
   }}
   action={action}
>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unexplained Reference Error in Next.js Typescript: Variable Accessed before Initialization

I am currently working on an admin website and encountered the error Block-scoped variable used before its declaration.. I will provide details using images and code. This is my first time seeking help on StackOverflow. Error Message: Block-scoped variab ...

javascriptreactjstypescriptnext.jsreact-query

Contrasts in the immutability strategies of Vuex and Redux

After exploring Vuex and noticing how simple it is to mutate states with mutation handlers using basic assignment, I am currently delving into redux. I have come to realize that redux emphasizes immutability, which can make coding a bit more verbose. This ...

reactjsvue.jsreduxvuex

Why won't my sticky element function properly with the position attribute set to sticky?

Hey there! I've been diving into learning all about CSS positions and have nailed down most of them. However, for some reason, the sticky position just won't cooperate and is stubbornly acting like a relative one instead. Check out my HTML snipp ...

htmlcss

Replace the default disc icon with a more detailed icon for UL lists

I am working with an unordered list and I want to use <details> to show a sublist for one of the items: <ul> <li><details> <summary>details bullet</summary> <ul> <li>detail 1</li> ...

htmlcss

How long does it typically take to build a ReactJS application with a Gatsby theme?

I'm currently working on a ReactJS application using a gatsby-theme, but the build time is taking over 6 minutes. Is this typical for this type of application? If not, what can I do to improve and optimize the build time for my gatsby-theme project? ...

reactjsgatsby

An unexpected error occurred: ReferenceError - document is undefined

Error Alert: Unhandled Runtime Error ReferenceError: doc is not defined Source of Issue components\Modal.js (42:18) @ updateDoc 40 | await uploadString(imageRef, selectedFile, "data_url").then(async (snapshot) => { 41 | const do ...

javascriptreactjsgoogle-cloud-platformgoogle-cloud-firestorenext.js

Eliminate Specific Days from Material Calendar Display

After struggling to remove selected days from the material calendar and their decorators without success, I eventually found a workaround. Instead of using removeDecorator(), I created an additional XML file to decorate the removed days. I will share my s ...

javaandroidmaterial-uicalendar

Transform the expansion panel functional component into a Class Component

As a newcomer to React, I've been working on converting the functional accordion expansion panel below into a class component. My main struggle lies in adapting the handleChange event to fit within a class component structure. Despite multiple attempt ...

reactjsevent-handlingmaterial-uireact-state

What strategies and techniques should be considered when creating websites optimized for mobile devices?

With a wealth of experience in programming languages like Java, Python, and C, I actively engage in self-study to enhance my skills. While I have dabbled in creating mobile-friendly websites, upon reviewing my work, it is evident that my frontend developme ...

javascripthtmlcssreactjsdesign-patterns

The troubleshooting issue with jQuery animate Scrolltop malfunctioning

My goal is to use jQuery to scroll the page to a specific div when a button is clicked. Despite not seeing any errors in the JavaScript console, the page does not actually scroll to the desired location. I have tried placing the jQuery js file before and a ...

javascriptjqueryhtmlcss

The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

<ion-item ng-bind-html="renderHtml(word[key])"> </ion-item> When referring to word[key], it represents: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> This is the CSS being u ...

javascripthtmlcssangularjs

Utilizing properties from the same object based on certain conditions

Here's a perplexing query that's been on my mind lately. I have this object with all the styles I need to apply to an element in my React app. const LinkStyle = { textDecoration : 'none', color : 'rgba(58, 62, 65, 1)', ...

javascriptreactjstypescriptobjectjsx

Ways to retrieve the parent DIV's width and adjust the child DIV's width to match

Attached is my question with the HTML and a screenshot. Within a DIV container (DIV with ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer), there are two inner DIVs - one for the left column TITLE (DIV ID=dvTitles) and the other f ...

jqueryhtmlcss

The interactive Material UI Radio buttons are not responding to click events due to dynamic generation

Click here to see the demo in action: https://codesandbox.io/s/material-demo-9fwlz I expected this code to produce checkable radio elements, but it doesn't seem to be working correctly. Can anyone identify what might be causing the issue? This code s ...

reactjstypescriptmaterial-ui

@page Css not displaying properly on the Mozilla Firefox browser

In order to fulfill my requirement, I need to ensure that there is a consistent 10cm margin on all pages when printing. Printing on my web page involves utilizing the window.print() function. However, due to the dynamic nature of the content, the number o ...

cssasp.net-mvcprinting

Effect on Label in WordPress Contact Form 7 When Input Field is Populated

Currently, I am attempting to achieve the floating label effect on Contact Form 7 and have encountered an issue. Although I have successfully implemented the label effect on input:focus, I am struggling to make it persist once text has been entered and foc ...

htmlcsswordpresscontact-form-7

How do I customize the border color for the Select component in Material UI?

I have been working on customizing the Select component provided by Material UI. Here is a visual representation of what it currently looks like: https://i.stack.imgur.com/YGheB.png My goal is to change the border-color of the select component from the ...

cssreactjsmaterial-ui

What is the best way to merge an array of objects into a single object?

Is there a way to dynamically convert object1 into object2, considering that the keys like 'apple' and 'water' inside the objects are not static? const object1 = { apple:[ {a:''}, {b:'&apos ...

javascriptreactjstypescriptnext.js

Are there any methods to improve the coding, align images to the center, and ensure that elements stay in their designated positions?

Is there a way to tidy up the code, center images, and keep everything in place? This is the look I desire: The main outer box should remain centered on the browser page. Pause, play, and stop buttons should float to the left of the box. My image sh ...

htmlcss

Display scrollable content at the bottom

I am currently working on creating a chat application using JavaScript (AngularJS without jQuery) and I am wondering if it is possible to have a scrollable div load to the bottom automatically. While I am familiar with the scrollTo JS property, I do not f ...

javascripthtmlcssangularjs