Using Material UI, I have styled a typography element and a button to appear on the

Struggling to position a button and a <Typography> element side by side:

Here's what I currently have:

<Grid item lg={12} md={12} sm={12} xs={12} className={classes.register}>
    <Typography noWrap className={classes.typoText} variant="subtitle2">
        text1
    </Typography>

    <ButtonBase className={classes.labelForgot} disableFocusRipple="false" disableRipple="false" centerRipple="false">
        <Typography noWrap className={classes.labelForgot} variant="subtitle2">
            text2
        </Typography>
    </ButtonBase>
</Grid>

The styles applied:

labelForgot: {
    color: 'rgba(20, 176, 12,0.9)',
    backgroundColor: 'transparent',
    paddingLeft: 2,
    '&:hover': {
        color: 'rgb(57, 232, 48)',
        backgroundColor: 'transparent',
    }
},
root: {
    backgroundSize: 'cover', 
    backgroundPosition: 'center center',
    backgroundRepeat: 'no-repeat',
    minHeight: '100vh',
    justifyContent:'center', 
    overflow: 'hidden',
},
gridMain: {
    margin: '0 auto',
    maxWidth: 300,
},

The main container has a <div> set to occupy 100% height.

Using CSS grid main for the layout container.

Check out the output here

cssreactjsmaterial-ui

Answer №1

How to vertically align an icon and text in Material UI

Take a look at this helpful page I found when facing the same challenge. The solution involves wrapping the elements with a div...

<div style={{
          display: 'flex',
          alignItems: 'center'
}}>
   <Typography noWrap className={classes.typoText} variant="subtitle2">
       Text 1
   </Typography>

   <ButtonBase className={classes.labelForgot} disableFocusRipple="false" 
      disableRipple="false" centerRipple="false">
      <Typography noWrap className={classes.labelForgot} variant="subtitle2">
         Text 2
      </Typography>
   </ButtonBase>
</div>

I also attempted to achieve this using Grids from Material UI, but encountered challenges with a header and buttons.

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

How can I retrieve the latest state of the Redux store in getServerSideProps in Next.js?

I am attempting to retrieve the most up-to-date redux state in getServerSideProps like so: export const getServerSideProps = async (ctx) => { const state = store.getState(); console.log(state.name); return { props: { login: false } }; }; H ...

javascriptreactjsreduxnext.jsserver-side-rendering

Retrieve models via external URL using ThreeJS and Fiber

Exploring Threejs has been quite fascinating for me, and one question that arose was whether it is possible to load 3D models using a remote URL. While going through drei's documentation, I came across a parameter called URL. However, the storybook se ...

reactjsthree.jsreact-three-fiber

Styling with CSS: Shifting an Element with each adjustment in page width

Within my project, there is a basic div that serves as a navigation bar. Inside this div rests an image portraying a logo. My goal is for the position of the logo to adjust every time the page width is altered. I attempted using media queries for this pu ...

htmlcssmedia-queries

Discover the process of changing a prop with a button click in NextJS

In my NextJs project, I have a video player component that displays videos using a {videoLink} prop: <ReactPlayer playing={true} controls={true} muted={true} loop={true} width="100" height="100" url={videoLinkDeep} poster="ima ...

reactjstypescriptnext.js

What about connecting mapStateToProps with a specific ID?

Currently, I have a basic function that fetches all Elements const mapStateToProps = ({elements}) => { return { elements: getElementsByKeyName(elements, 'visibleElements'), }; }; I want to modify it to something like this c ...

javascriptreactjsreact-redux

Tips for utilizing numerous tables with multiple selection tags

I am struggling with a jQuery issue involving multiple container elements with the class "product-sizes". Each container contains a select option for choosing between inches and centimeters, which triggers the corresponding table display. The problem arise ...

javascripthtmljquerycssforeach

Displaying a loading screen while a jQuery ajax request is in progress

Currently, I am attempting to display a loading div while waiting for an ajax call to finish. Despite experimenting with various methods, I have not been able to consistently achieve the desired outcome. In my present code, everything functions properly o ...

javascriptjqueryhtmlcssajax

What is the process for aligning rows with the selected option from the drop-down menu

Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...

javascripthtmlcss

Issue encountering with flex-wrap to shift to the next row once reaching the 5th element

Recently, I've been experimenting with creating an image gallery using flexbox and incorporating a flex-basis transition to control the growth and shrinkage of elements upon hover. However, I'm encountering difficulties in adjusting the gallery t ...

htmlcssflexboxflex-grow

Discovering how to efficiently track and respond to changes in MobX state within a React

Within my react native project, I have observed that upon clicking a button, the state of my mobx app undergoes an update. To address this issue, I aim to employ a react lifecycle method that can monitor and automatically reflect this modification. For th ...

javascriptreactjsreact-nativemobx

Although my MUI dataTable is currently not responsive, I am utilizing FLEX 1 to try and improve its

const columns = [ { field: 'id', headerName: 'ID', }, { field: 'moduleName', headerName: 'Module Name', flex: 1, editable: false, sortable: false, filter: false, hid ...

material-uimui-datatable

Formik's setField function is not properly updating the value of an array when using Material UI's autocomplete

When the data is retrieved from the API, it comes in the following format: otherLanguages:[{code:EN,name:"English"},{code:MD,name:"Mandarin"}] I am attempting to initialize the Autocomplete with this data: initialValues: { otherLa ...

javascriptreactjsmaterial-ui

Maintaining aspect ratio in CSS grid layouts

I am in the process of designing a CSS grid layout where I want to maintain the same height for all columns. Additionally, I would like the first item to have a 16:9 aspect ratio. However, I am encountering an issue where the images are not fitting perfect ...

csscss-grid

Trouble shutting down the <DatePicker /> while within the <Dialog /> in MUI 5 and HeadlessUI

I am encountering an issue while using HeadlessUI with MUI 5. The problem arises when I attempt to close the date selection popper of the <DatePicker /> component inside a <Dialog /> component from HeadlessUI. Ideally, the popper should close u ...

reactjsmaterial-uitailwind-cssheadless-ui

I am currently implementing ReactJS with the AntD Table framework, but I am facing difficulties in displaying the data within the table

I am currently utilizing reactJS and antd to create a table displaying data retrieved from the server. After implementing the code below, I encountered some issues with the output. Any assistance would be greatly appreciated. import React, { useEffect, use ...

reactjsantd

Troubleshooting Problems with CSS `transform` in JQuery UI's `Slide` Transition

While implementing JQueryUI's slide transition on an element with a CSS transform, I encountered an issue where the top half of the element gets hidden during the animation. Is there a way to tweak either my JQueryUI animation or CSS to avoid this pro ...

javascriptjqueryjquery-uicssangularjs

Sharing styles between ReactJS and Material-UI - best practices

I am currently facing an issue where I need to share styles across my entire web application. Here is the Problem: I have been using makeStyles in a repetitive manner as shown below: In component_A.js const useStyles = makeStyles({ specific_style: { ...

javascriptreactjsmaterial-uijsx

What does React specifically point to when mentioning the encapsulated object?

New to React and seeking advice. Here are the components I am working with: var Vertex = React.createClass({ //2. Struggling to parameterize this instantiation, facing parsing errors when trying to use this.props within the render function's < ...

reactjsthree.js

Center-align the table element

I've been struggling to center align this table element, specifically the one containing the square, but nothing seems to be working. Can anyone lend a hand in fixing this issue? <table> <tbody> <tr> <td>TURKEY - SU ...

javascripthtmlcss

Gliding along a div and concealing it out of view, making it seem like it has disappeared

I attempted to slide down the ".preloader" div after a 2-second delay using JQUERY, but I couldn't get it to work as expected. I didn't want to use a toggle button for this effect. I also experimented with creating an animation using @keyframes, ...

javascripthtmljquerycss