将道具传递给 MUI 样式 [英] Passing props to MUI styles

问题描述

给定 Card 代码，如此处.如何更新卡片样式或任何材质 UI 样式:

const 样式 = 主题 =>({卡片: {最小宽度:275，},

如下:

const 样式 = 主题 =>({卡片: {minWidth: 275, backgroundColor: props.color},

当我尝试最新的时，我得到了

第 15 行:'props' 未定义 no-undef

当我将代码更新为:

const 样式 = 主题 =>(道具) =>({卡片: {minWidth: 275, backgroundColor: props.color},

还有

 const 样式 = (theme ,props) =>({卡片: {minWidth: 275, backgroundColor: props.color},

代替

const 样式 = 主题 =>({卡片: {minWidth: 275, backgroundColor: props.color},

我在网页上弄乱了组件卡片样式.

顺便说一下，我通过props如下:

请帮忙！

解决方案

这个答案写在4.0版本之前严重过时！

说真的，如果您要为函数组件设置样式，请使用 makeStyles.

James Tan 的回答是 4.x 版的最佳答案

下面的任何东西都是古老的:

当您使用 withStyles 时，您可以访问 theme，但不能访问 props.

请注意，Github 上有一个未决问题要求此功能和一些评论可能会为您指明您可能感兴趣的替代解决方案.

使用 props 更改卡片背景颜色的一种方法是使用内联样式设置此属性.我已经将您的 原始代码和盒子 分叉了一些更改，您可以查看 修改版 看看这个在行动.

这是我所做的:

1. 使用 backgroundColor 属性渲染组件:

//在 index.js 中如果(根元素){render(<Demo backgroundColor="#f00"/>, rootElement);}

2. 使用此道具将内联样式应用于卡片:

 function SimpleCard(props) {//在 demo.js 中const { 类，背景颜色 } = 道具；const Bull = <span className={classes.bullet}>•</span>;返回 (<div><卡片类名={classes.card} style={{ backgroundColor }}><卡片内容>//等等

现在渲染的 卡片组件 具有红色 (#F00) 背景>

查看文档的覆盖部分以了解其他选项.

Given the Card code as in here. How can I update the card style or any material UI style as from:

const styles = theme => ({
  card: {
  minWidth: 275,
},

To such follows:

const styles = theme => ({
  card: {
  minWidth: 275, backgroundColor: props.color
},

when I tried the latest one, I got

Line 15:  'props' is not defined  no-undef

when I updated code to be :

const styles = theme =>  (props) => ({
  card: {
  minWidth: 275, backgroundColor: props.color
},

also

 const styles  = (theme ,props) => ({
   card: {
   minWidth: 275, backgroundColor: props.color
 },

Instead of

const styles = theme => ({
  card: {
  minWidth: 275, backgroundColor: props.color
},

I got the component card style at the web page messy.

By the way, I pass props as follows:

<SimpleCard backgroundColor="#f5f2ff" />

please help!

解决方案

This answer was written prior to version 4.0 severely out of date!

Seriously, if you're styling a function component, use makeStyles.

The answer from James Tan is the best answer for version 4.x

Anything below here is ancient:

When you're using withStyles, you have access to the theme, but not props.

Please note that there is an open issue on Github requesting this feature and some of the comments may point you to an alternative solution that may interest you.

One way to change the background color of a card using props would be to set this property using inline styles. I've forked your original codesandbox with a few changes, you can view the modified version to see this in action.

Here's what I did:

1. Render the component with a backgroundColor prop:

// in index.js
if (rootElement) {
  render(<Demo backgroundColor="#f00" />, rootElement);
}

2. Use this prop to apply an inline style to the card:

    function SimpleCard(props) {
      // in demo.js
      const { classes, backgroundColor } = props;
      const bull = <span className={classes.bullet}>•</span>;
      return (
        <div>
          <Card className={classes.card} style={{ backgroundColor }}>
            <CardContent>
              // etc

Now the rendered Card component has a red (#F00) background

Take a look at the Overrides section of the documentation for other options.

这篇关于将道具传递给 MUI 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！