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

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

ReactJS:如何更改 Material UI 中步進器標簽的字體大小和 marginTop?

ReactJS:如何更改 Material UI 中步進器標簽的字體大小和 marginTop?

喵喔喔 2023-05-11 16:11:19
我想更改步進標簽的字體大小以及標簽和圓圈之間的邊距。默認marginTop是16px,我想縮小它,有什么辦法嗎?這是來自材料 ui 的 Codesandbox 代碼: https://codesandbox.io/s/tnpyj? file=/demo.js:0-6101  <Stepper alternativeLabel nonLinear activeStep={activeStep}>        {steps.map((label, index) => {          const stepProps = {};          const buttonProps = {};          if (isStepOptional(index)) {            buttonProps.optional = <Typography variant="caption">Optional</Typography>;          }          if (isStepSkipped(index)) {            stepProps.completed = false;          }          return (            <Step key={label} {...stepProps}>              <StepButton                onClick={handleStep(index)}                completed={isStepComplete(index)}                {...buttonProps}              >                {label}              </StepButton>            </Step>          );        })}      </Stepper>     ```
查看完整描述

2 回答

?
慕勒3428872

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

在您的內(nèi)部使用一個<StepLabel>組件,然后通過查看StepLabel CSS 文檔<Step>來覆蓋樣式:

// Add this

import StepLabel from '@material-ui/core/StepLabel';



const useStyles = makeStyles((theme) => ({

? // your other stuff here

??

? // Add this

? step_label_root: {

? ? fontSize: '10px',

? }

}));



// within the component


<Step key={label} {...stepProps}>

? <StepButton

? ? onClick={handleStep(index)}

? ? completed={isStepComplete(index)}

? ? {...buttonProps}>

? ? <StepLabel classes={{ label: classes.step_label_root }}> // HERE add this

? ? ? {label}

? ? </StepLabel>

? </StepButton>

</Step>


查看完整回答
反對 回復 2023-05-11
?
慕田峪4524236

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

如果想在 material-ui 中更改樣式,您應該使用 withStyles。打字稿中的示例:


import {

  createStyles,

  Theme,

  withStyles,

  Step

} from "@material-ui/core";


const CustomStep = withStyles((theme: Theme) =>

  createStyles({

    // Input your style here

  })

)(Step);


export default function Dashboard() {

   return (....)

}


查看完整回答
反對 回復 2023-05-11
  • 2 回答
  • 0 關注
  • 171 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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