[解決済み] MUIスタイルにプロップを渡す

質問

与えられた Card のようなコード ここで . どのように私はカードスタイルまたは任意の材料UIスタイルからとして更新することができます。

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

このようなものに、次のように

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

を試したところ、最新のものでは

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

というコードに更新したところ、:

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

また

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

の代わりに

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

Webページがぐちゃぐちゃになったところで、コンポーネントカードのスタイルを取得しました。

ちなみに、propsは以下のように渡しています。

<SimpleCard backgroundColor="#f5f2ff" />

助けてください

どのように解決するのですか？

この回答はバージョン4.0より前に書かれたもので、非常に古いものです。

真面目な話、ファンクションコンポーネントをスタイリングする場合は makeStyles .

は ジェームズ・タン氏からの回答 はバージョン 4.x に対するベストアンサーです。

ここより下は古いものです。

を使っているとき withStyles にアクセスすることができます。 theme にはアクセスできませんが props .

があることに注意してください。 オープンイシュー があり、コメントの中にはあなたが興味を持ちそうな別の解決策を示すものがあるかもしれません。

propsを使用してカードの背景色を変更する1つの方法は、インラインスタイルを使用してこのプロパティを設定することでしょう。 私はあなたの オリジナルコードとボックス を少し変更したものを表示します。 修正版 をご覧ください。

以下は私がやったことです。

1. コンポーネントを backgroundColor プロパティを使用します。

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

1. カードにインラインスタイルを適用するには、このプロップを使用します。

    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

今度はレンダリングされた カードコンポーネント の背景が赤 (#F00) になっています。

を見てみましょう。 を上書きする セクションをご覧ください。