Блог

У меня возникли проблемы с выравниванием текста по центру в теге текстового поля. Я пробовал использовать TextAlign:»центр» и text-align: центр, но мне пока не удалось заставить его работать. Я предполагаю, что у меня есть какая-то проблема, когда другой css перезаписывает текстовую строку, но я не уверен, где именно.

вот файл my addPage:

 const useStyles = makeStyles(() => ({
    addPage: {
        display: 'flex',
        justifyContent: 'center',
        marginTop: '100px'
    },
    addMovementDiv: {
        background: '#C4C4C4',
        fontFamily: 'PT Sans Caption',
        fontSize: '18px',
        borderRadius: '10px',
        padding: '20px',
        marginTop: '50px',
        textAlign: 'center'
    },
    textDiv: {
        background: '#ffffff',
        padding: '8px',
        borderRadius: '10px',
    },
    buttonDiv: {
        paddingTop: '20px'
    }
}));

const AddPage = () => {
    const classes = useStyles();
    const [moveData, setMoveData] = useState({ movementName:'', movementWeight: '' });
    const dispatch = useDispatch();
    const handleSubmit = (e) => {
        e.preventDefault();

        dispatch(createMovement(moveData));
    };

    return (
        <div>
            <Header title="Add Movement" />
            <div className={classes.addPage}>
                <div className={classes.addMovementDiv}>
                    <form onSubmit={handleSubmit} >
                        <div className={classes.textDiv}>
                            <TextField 
                                name="movementName"
                                variant="outlined"
                                label="Movement Name" 
                                style={{ width:200 }}
                                value={moveData.movementName}
                                onChange={(e) => setMoveData({ ...moveData, movementName: e.target.value })}
                            />
                            <TextField
                                name="movementWeight" 
                                variant="outlined"
                                label="One Rep Max"
                                style={{ width:200 }} 
                                value={moveData.movementWeight}
                                InputProps={{endAdornment: <InputAdornment position="end">lb</InputAdornment>}}
                                onChange={(e) => setMoveData({ ...moveData, movementWeight: e.target.value })}
                            />
                        </div>
                         <div className={classes.buttonDiv}>
                            <Button variant="contained" type="submit" endIcon={<AddIcon />} fullWidth >Submit</Button>
                         </div>
                    </form>
                </div>
            </div>
        </div>
    );
};

export default AddPage;
 

Я попытался добавить TextAlign непосредственно в свойство стиля текстового поля:

 style={{ width:200, textAlign:'center' }}
 

и попытался добавить его в текстовое поле classname в стиле использования вверху:

 textDiv: {
        background: '#ffffff',
        padding: '8px',
        borderRadius: '10px',
        textAlign: 'center',
    },
 

ни то, ни другое не сработало. Есть какие-нибудь идеи?