I managed to achieve the desired effect using absolute positioning, but I know this is not the most elegant solution and it lacks re-usability. Is there a way for me to group these two elements in a flex container and center only the text? Also, I'm facing an issue with an MUI icon having an invisible square around it that's causing alignment problems.
https://i.sstatic.net/Vj0Xp.png
Although I am working with React and MUI, this question primarily pertains to CSS so the specific frameworks shouldn't be a major concern:
export default function CreateGuest() {
const defaultText = 'Enter a display name'
const [guestDisplayName, setGuestDisplayName] = useState(defaultText)
return (
<Box
display="flex"
justifyContent="center"
margin="auto"
sx={{
width: 366,
height: 386,
backgroundColor: 'primary.contrastText',
boxShadow: '0 2px 3px #00000053',
}}
>
<Stack justifyContent="space-evenly">
<Typography
variant="h3"
component="pre"
textAlign="center"
sx={{ position: 'relative' }}
>
<ChevronLeftIcon
sx={{
fontSize: 48,
color: 'secondary.main',
position: 'absolute',
bottom: '43%',
right: '87%',
'&:hover': {
cursor: 'pointer',
},
}}
/>
{`Create a\nGuest User`}
</Typography>
<TextField
label={guestDisplayName === '' ? defaultText : guestDisplayName}
onChange={(e) => setGuestDisplayName(e.target.value)}
variant="outlined"
color="info"
></TextField>
<Button variant="contained">Create Guest</Button>
</Stack>
</Box>
)
}