Я пытаюсь создать простую страницу реакции, но я застрял в самом начале: мой текст выходит из коробки, и я не понимаю, почему это происходит.
Может кто-то иметь взгляд на мои стили? Изображение с унаследованными стилями
Если я удаляю whiteSpace="nowrap", текст будет намного ниже. Моя цель - разместить текст в нижней части картинки. Кто-нибудь знает, где может быть проблема? Большое спасибо заранее!
HeaderMui. js
const url = process.env.PUBLIC_URL + "/img/castle.jpg";
const useStyles = makeStyles((theme => ({</p>
<p>header: {
height: "57vh",
background: <code>url(${url})</code>,
backgroundSize: "cover",
alignItems: "center",
justifyContent: "center",
alignItems: "center",
backgroundPosition: "center center",
backgroundAttachment: "fixed",
flexGrow: 1,
},</p>
<p>headerText: {
textAlign: "left",
fontSize: 20,
lineHeight: 20,
boxSizing: "border-box",
display: 'inline-block',
alignItems: "center",
textAlign:"center"
},
textWrapper: {</p>
<pre><code>display: "block",
paddingRight: 15,
paddingLeft: 15,
alignItems: "center"
</code> },
}
)));
function HeaderMui() {
const classes = useStyles();
return (
<Box className={classes.header} flexWrap="nowrap">
<Box className={classes.textWrapper} width="100%" flexWrap="nowrap">
<h2 >Hogwarts Online</h2>
< Box component="span" className={classes.headerText} display="inline-block" flexWrap="wrap" whiteSpace="nowrap"> Hogwarts Online is the first platform out there for the wizards far away from Hogwarts. Experience the power of British magical education while still working muggle job. All you need is a magic wand and to be a proved wizard!</Box>
</Box>
</Box>
);
}
export default HeaderMui;
Приложение. js
function App(){
const greaterThanSm = useMediaQuery(theme => theme.breakpoints.up("sm"));
const greaterThanMd = useMediaQuery(theme => theme.breakpoints.up("md"));
return (
<>
<Hidden only="xs">
<AppbarMui />
</Hidden>
<Grid container spacing={3}>
<Grid
item
xs={12}
md={7}
lg={12}
>
<HeaderMui />
</Grid>
</Grid>
</>
);
}
export default App;