#reactjs #material-ui
Вопрос:
Я использую элемент списка Material-UI (https://material-ui.com/components/lists/)
И я хотел бы «обосновать слева» мои пункты в моем списке слева. Очевидно, я могу сделать это с помощью свойства flex «flex-start», которое я могу установить в свойстве alignItems элемента списка, например так :
<List>
<ListItem alignItems="flex-start">
<ListItemText primary={"First Element "} />
<ListItemText primary={" Second Element"} />
</ListItem>
</List>
Однако это, похоже, не работает, так как они равномерно распределены, когда я вижу это в браузере.
Я делаю что-то не так?
Комментарии:
1. Я не верю, что вы можете использовать несколько компонентов ListItemText в одном списке.
2. какова альтернатива?
3. Зависит от того, почему вы используете два текста списка. Вы назвали его «элемент», так что это означает, что вы создадите элемент списка для каждого элемента.
Ответ №1:
Попробуй это…
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
root: {
display:'flex',
alignItems:'flex-start',
flexDirection: "row"
},
});
export default function MyComponent(props) {
const classes = useStyles(props);
return (
<List className={classes.root}>
<ListItem>
<ListItemText primary={"First Element "} />
</ListItem>
<ListItem>
<ListItemText primary={"Second Element "} />
</ListItem>
</List>
);
}
Комментарии:
1. вы можете проверить сейчас?
Ответ №2:
ListItemText имеет flex: 1 1 auto; стиль по умолчанию. Вам нужно изменить это, как:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { List, ListItem, ListItemText } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
root: {
"amp; .MuiListItemText-root": {
flex: "initial"
}
}
}));
export default function CustomStyles() {
const classes = useStyles();
return (
<List classes={classes}>
<ListItem alignItems="flex-start">
<ListItemText primary={"First Element "} />
<ListItemText primary={" Second Element"} />
</ListItem>
</List>
);
}
