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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何使用 Material-UI 在 React 中向未知子元素添加樣式？

如何使用 Material-UI 在 React 中向未知子元素添加樣式？

慕運(yùn)維8079593 2023-10-30 16:00:59
下面的函數(shù)將在循環(huán)中運(yùn)行。我想添加樣式，icon我想將其作為參數(shù)傳遞給函數(shù)。這icon是一個(gè)未知的 React Material-UI Icon 組件。const renderStyledCard = (lightMode, heading, num, icon) => {  const classes = lightMode ? useLightCardStyles(): useDarkCardStyles();  return (    <Card className={classes.root}>      <CardContent>        <Typography variant="h4" component="h4" className={classes.textColor}>          {heading}        </Typography>        <div className={classes.content}>          <Typography variant="h4" component="h4" className={classes.textColor}>            {num}          </Typography>          {icon}          // Ex. <VpnKey className={[classes.icon, classes.textColor]} />          // Ex. <AccountCircle className={[classes.icon, classes.textColor]} />          {icon}        </div>      </CardContent>    </Card>  );};循環(huán)執(zhí)行將類似于 -return [        {light: true,          heading: 'Accounts',          num: 100,          icon: <AccountCircle />        },        ...theRest       ].map(ele => renderStyledCard(...ele))循環(huán)代碼可能是錯(cuò)誤的，我只是將其寫在這里作為示例來展示我想要如何執(zhí)行它。有沒有更好的辦法？任何幫助都是極好的。
查看完整描述

2 回答

?
守著星空守著你

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超8個(gè)贊

一些注意點(diǎn)：

  • 添加{}喜歡({ light, heading, num, icon })列出道具

  • propslightMode與列表屬性不匹配light，需要更改其中之一

  • 使用 Material-UI嵌套選擇器?& svg從其父 div 自定義圖標(biāo)樣式

完整代碼示例：

import React from "react";

import "./styles.css";

import GetApp from "@material-ui/icons/GetApp";

import AccountCircle from "@material-ui/icons/AccountCircle";

import { Card, CardContent, Typography, makeStyles } from "@material-ui/core";

const useLightCardStyles = makeStyles(theme => ({

? root: {},

? content: {

? ? "& svg": {

? ? ? color: "red"

? ? }

? }

}));

const useDarkCardStyles = makeStyles(theme => ({}));


const data = [

? { light: true, heading: "Accounts", num: 100, icon: <AccountCircle /> },

? { light: true, heading: "Accounts", num: 100, icon: <GetApp /> }

];


const StyledCard = ({ light, heading, num, icon }) => {

? const lightCardClasses = useLightCardStyles();

? const darkCardClasses = useDarkCardStyles();

? const classes = light ? lightCardClasses : darkCardClasses;

? return (

? ? <Card className={classes.root}>

? ? ? <CardContent>

? ? ? ? <Typography variant="h4" component="h4" className={classes.textColor}>

? ? ? ? ? {heading}

? ? ? ? </Typography>

? ? ? ? <div className={classes.content}>

? ? ? ? ? <Typography variant="h4" component="h4" className={classes.textColor}>

? ? ? ? ? ? {num}

? ? ? ? ? </Typography>

? ? ? ? ? {icon}

? ? ? ? </div>

? ? ? </CardContent>

? ? </Card>

? );

};


export default function App() {

? return (

? ? <div className="App">

? ? ? {data.map(props => (

? ? ? ? <StyledCard {...props} />

? ? ? ))}

? ? </div>

? );

}


查看完整回答
反對(duì) 回復(fù) 2023-10-30
?
嗶嗶one

TA貢獻(xiàn)1854條經(jīng)驗(yàn) 獲得超8個(gè)贊

我認(rèn)為這應(yīng)該有效：


const renderStyledCard = (lightMode, heading, num, icon) => {

  const classes = lightMode ? useLightCardStyles(): useDarkCardStyles();

  icon.style.color = "red";

  return(/*....*/)

}

嘗試console.log(icon.style)


查看完整回答
反對(duì) 回復(fù) 2023-10-30
  • 2 回答
  • 0 關(guān)注
  • 128 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)