第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何讓Button和TextField的間距完美?

如何讓Button和TextField的間距完美?

幕布斯6054654 2023-09-25 16:01:58
Material UI我正在嘗試使用和制作表格React。這是我到目前為止所擁有的:import React from 'react'import {Button, TextField} from '@material-ui/core'import AddIcon from '@material-ui/icons/Add'import PropTypes from 'prop-types'class AddItem extends React.Component {    state = {        text: ''    }    handleChange = e => {        this.setState({text: e.target.value})    }    render() {        return (            <form onSubmit={this.props.onSubmit(this.state.text)}>                <TextField id="task" label="Task" placeholder="e.g. Feed the fish" value={this.state.text}                           onChange={this.handleChange} color="secondary" variant="outlined" size="small"/>                <Button color="secondary" variant="outlined" endIcon={<AddIcon/>} size="large">                    Add                </Button>            </form>        )    }}AddItem.propTypes = {    onSubmit: PropTypes.func.isRequired}export default AddItem結果如下截圖:可是等等!你能看到嗎?高度Button和TextField高度就這么一點點錯位?。ㄎ艺J為是 2.5px)。有沒有什么辦法解決這一問題?這比之前要好,之前的 TextField 比 Button 大很多(我的修復是size="small"在 TextField 上)。如何確保 TextField 和 Button 的高度相同?我知道在 Bulma 中有類似組件的東西level可以幫助解決這個問題,那么有沒有類似的解決方案Material UI?
查看完整描述

2 回答

?
一只甜甜圈

TA貢獻1836條經(jīng)驗 獲得超5個贊

您可以<Button>?根據(jù)需要定制您的風格。

讓我們通過覆蓋按鈕的輪廓和大變體的<StyledButton>樣式(填充)來創(chuàng)建。

import { withStyles } from "@material-ui/core/styles";


const styles = {

? outlinedSizeLarge: {

? ? padding: "6px 21px" // default is "7px 21px" https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js#L202

? }

};


const StyledButton = withStyles(styles)(Button);

然后你可以在你的組件中使用它:


<form onSubmit={this.props.onSubmit(this.state.text)}>

? ? <TextField id="task" label="Task" placeholder="e.g. Feed the fish" value={this.state.text} onChange={this.handleChange} color="secondary" variant="outlined" size="small"/>

? ? <StyledButton color="secondary" variant="outlined" endIcon={<AddIcon/>} size="large">Add</StyledButton>

</form>

結果:

https://img3.sycdn.imooc.com/65113ebb0001ac3d03090051.jpg

查看完整回答
反對 回復 2023-09-25
?
慕標5832272

TA貢獻1966條經(jīng)驗 獲得超4個贊

您是否嘗試使用variant帶有 value 的屬性outlined

<Button variant='outlined' size='small'>Add</Button>


查看完整回答
反對 回復 2023-09-25
  • 2 回答
  • 0 關注
  • 118 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號