亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

Material-UI 中依賴道具的切換顏色

Material-UI 中依賴道具的切換顏色

慕田峪9158850 2023-05-11 16:32:07
以下代碼改編自用于自定義的SwitchMaterial-UI 文檔，允許將開關顏色設置為藍色：import React from 'react'import Switch from '@material-ui/core/Switch'import {withStyles} from '@material-ui/core/styles'const ColoredSwitch = withStyles({  switchBase: {    '&$checked': {      color: 'blue',    },  },  checked: {},  track: {},})(Switch)但是當試圖調整它以便可以通過組件屬性設置顏色時，它就是行不通。以下代碼（僅是偽動態的）事件呈現為默認開關：const ColoredSwitch = withStyles({  switchBase: {    '&$checked': {      color: props => 'blue',    },  },  checked: {},  track: {},})(Switch)我想我一定做錯了什么，但無法弄清楚是什么。
查看完整描述

1 回答

?
開心每一天1111

TA貢獻1836條經驗 獲得超13個贊

const ColoredSwitch = withStyles({

? switchBase: {

? ? "&.Mui-checked": {

? ? ? color: (props) => props.customchecked

? ? }

? },

? checked: {},

? track: {}

})((props) => {

? const { classes, ...other } = props;

? return <Switch classes={{ switchBase: classes.switchBase }} {...other} />;

});

您也可以使用makeStyles


const useStyles = makeStyles({

? switchBaseChecked: {

? ? "&.Mui-checked": {

? ? ? color: (props) => props.color

? ? }

? }

});


export default function Switches() {

? const props = { color: "green" };

? const classes = useStyles(props);

? return (

? ? <Switch

? ? ? color="primary"

? ? ? classes={{

? ? ? ? checked: classes.switchBaseChecked

? ? ? }}

? ? />

? );

}


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

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號