#javascript #reactjs #material-ui
#javascript #reactjs #материал-пользовательский интерфейс
Вопрос:
я пытаюсь разделить элементы списка (флажок, текст и кнопки) внутри списка пользовательского интерфейса material, но это не работает, я перепробовал все возможные решения, но у меня это не работает … если кто-то знает, пожалуйста, исправьте это … спасибо
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { todoDeleted, todoUpdated, todoCompleted } from '../Slices/TodoSlice';
import { Checkbox, List, ListItem, makeStyles } from '@material-ui/core'
const useStyles = makeStyles({
listRoot: {
display: 'flex',
justifyContent: 'center',
backgroundColor: '#fce4ec',
borderWidth: "1px",
borderColor: "#aaaaaa",
borderStyle: "solid",
borderRadius: "20px",
height: "40px",
marginBottom: "10px",
}
})
export default function TodoItem({ todo, i }) {
const classes = useStyles()
const dispatch = useDispatch();
const [editable, setEditable] = useState(false);
const [text, setText] = useState(todo.text);
const handleUpdate = () => {
dispatch(
todoUpdated({
id: todo.id,
text,
})
);
if (editable) {
setText(todo.text);
}
setEditable(!editable);
};
return (
<div className={classes.listRoot}>
<List>
<ListItem>
<Checkbox
value={todo.id}
onChange={(e) => dispatch(todoCompleted( e.target.value))}
defaultChecked={todo.done}
/>
<div>
{todo.done ? (
<p>
<del>{todo.text}</del>
</p>
) : (
<h4>
{editable ? (
<input
type="text"
placeholder={text}
value={text}
onChange={(e) => setText(e.target.value)}
/>
) : (
todo.text
)}
</h4>
)}
</div>
<button
onClick={() => handleUpdate()}
disabled={todo.done}
>
{editable ? 'Update' : 'Edit'}
</button>
<button
onClick={() => {
console.log(todo.id);
return dispatch(todoDeleted(todo.id));
}}
>
Delete
</button>
</ListItem>
</List>
</div>
);
}
это код, я перепробовал все способы, но у меня это не работает, я что-то упускаю?
Ответ №1:
для выравнивания по вертикали в средних элементах flexbox используйте свойство align-items, установленное как center
:
const useStyles = makeStyles({
listRoot: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fce4ec',
borderWidth: "1px",
borderColor: "#aaaaaa",
borderStyle: "solid",
borderRadius: "20px",
height: "40px",
marginBottom: "10px",
}
})