web-dev-qa-db-ja.com

Material UI Icons npmパッケージがReactで提供する色を上書きできる方法はありますか？

Reactが初めてで、npmパッケージのマテリアルUIアイコンを使用しています（ https://www.npmjs.com/package/@material-ui/icons ） Reactコンポーネント内にアイコンを表示する：

インポート：

_import KeyboardArrowRightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right';
_

そしてレンダリング：

_readMoreLink={<a href={someUrl} >Read more <KeyboardArrowRightIcon /></a>}
_

ただし、KeyboardArrowRightIconはnpmパッケージによって提供されるSVGであるため、独自の塗りつぶし色が付属しています。

例：<svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.54);...

要素内にスタイル属性を含めることで、この色を上書きできることを知っています。例：

_<KeyboardArrowRightIcon style={{ fill: '#0072ea' }} />
_

しかし、これをSCSS変数（_style={{ fill: $link-color }}_）にする方法はありますか？

スタイルシートのリンクの色が変わると、後で誰かがこれらのハードコードされたインスタンスをすべて探し出さなければならなくなるのではないかと心配しています。

reactjssass
14
MeltingDog

2つのトーン（TwoTone）アイコンをカバーする唯一の正しい解決策は、それを渡すことですhtmColorプロパティ：

React.createElement(Icon, {htmlColor: "#00688b"})
1
radulle

私は同じ問題を抱えていました、私の解決策は：

import React from 'react';
import pure from 'recompose/pure';
import {SvgIcon} from '@material-ui/core';

let smile = (props) => (
 <SvgIcon {...props}
  component={props => {
    return (
      <svg {...props}>
        {React.cloneElement(props.children[0], {
          fill: "#4caf50"
        })}
      </svg>
    );
  }}
>
   <path d="M256,32C132.281,32,32,132.281,32,256s100.281,224,224,224s224-100.281,224-224S379.719,32,256,32z M256,448
            c-105.875,0-192-86.125-192-192S150.125,64,256,64s192,86.125,192,192S361.875,448,256,448z M160,192c0-26.5,14.313-48,32-48
            s32,21.5,32,48c0,26.531-14.313,48-32,48S160,218.531,160,192z M288,192c0-26.5,14.313-48,32-48s32,21.5,32,48
            c0,26.531-14.313,48-32,48S288,218.531,288,192z M384,288c-16.594,56.875-68.75,96-128,96c-59.266,0-111.406-39.125-128-96"></path>
</SvgIcon>
);
smile = pure(smile);
smile.displayName = 'smile';
smile.muiName = 'SvgIcon';

export default smile;
0
jorge santos

これが何をするかです

how it looks

MUI v4.5.1を使用しています。 fontSize[〜＃〜] api [〜＃〜] の値を継承して使用し、divまたはspanラッパーを追加して、そこに色を追加します。

APIドキュメントから

fontSizeデフォルト値：inherit。コンポーネントの色。このコンポーネントに意味のあるテーマカラーをサポートしています。

スターアイコンを追加

import React from 'react';
import Star from '@material-ui/icons/StarRounded';
import './styles.css';

export function FavStar() {
  return (
    <div className="star-container">
      <Star size="2em" fontSize="inherit" />
    </div>
  );
}

Style.css

.star-container {
  color: red;
  font-size: 30px;
}
0
kiranvj

SvgIcon を使用できます documentation から：

SvgIconコンポーネントは、子としてSVG path要素を取り、パスを表示するReactコンポーネントに変換し、アイコンのスタイルとマウスイベントに応答します。SVG要素は24x24ピクセルのビューポートに合わせてスケーリングする必要があります。

KeyboardArrowRightIconアイコンのパスを抽出するには、devToolsを使用する必要があります。

svg path

次に、次のようなカスタムカラーで使用します。

<SvgIcon
  component={svgProps => {
    return (
      <svg {...svgProps}>
        {React.cloneElement(svgProps.children[0], {
          fill: myColorVariable
        })}
      </svg>
    );
  }}
>
   <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path>
</SvgIcon>
0
Fraction