web-dev-qa-db-ja.com

スタイリングマテリアルのUIコンポーネント

本当に問題ではありませんが、私が満足していないことです。 react + TypeScript + css modules + https://material-ui-next.com/ を使用しています。問題は、マテリアルUIコンポーネントのスタイルを設定する必要がある場合、!importantを頻繁に使用する必要があることです。問題は、importantなしでスタイルを作成する方法があるかどうかです。問題を再現するためのサンプルプロジェクトを作成します https://github.com/halkar/test-css-modules

cssreactjstypescriptmaterial-uicss-modules
3
Artur Shamsutdinov

JssProviderを使用して、ページheadセクションの前にマテリアルUIスタイルを配置するように指示する必要がありました。

import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';

const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
jss.options.insertionPoint = document.getElementById('jss-insertion-point');

function App() {
  return (
    <JssProvider jss={jss} generateClassName={generateClassName}>
      ...
    </JssProvider>
  );
}

export default App;
0
Artur Shamsutdinov

material-uiは、スタイリングのためにコンポーネントの多くを公開しています。これを行うには2つの方法があります。

スタイルをグローバルに適用する

コンポーネントのスタイルをグローバルに設定して、テーマに適用できます。この例は次のようになります（ドキュメントからコピー http://www.material-ui.com/#/customization/themes ）：

import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';

// This replaces the textColor value on the palette
// and then update the keys for each component that depends on it.
// More on Colors: http://www.material-ui.com/#/customization/colors
const muiTheme = getMuiTheme({
  palette: {
    textColor: cyan500,
  },
  appBar: {
    height: 50,
  },
});

class Main extends React.Component {
  render() {
    // MuiThemeProvider takes the theme as a property and passed it down the hierarchy
    // using React's context feature.
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <AppBar title="My AppBar" />
      </MuiThemeProvider>
    );
  }
}

export default Main;

ここでわかるように、appBarコンポーネントの高さは50pxです。つまり、muiThemeを適用したツリーの下のアプリにappbarコンポーネントを追加するたびに、50pxの高さが与えられます。これは、各コンポーネントに適用できるすべてのスタイルのリストです https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js 。

スタイル属性を使用してスタイルを適用する

個々のコンポーネントにスタイルを適用するには、通常、styleプロパティを使用して、必要なスタイルを渡すことができます。

これは、12pxのマージンがRaisedButtonに適用されているドキュメントの別の例です。

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = {
  margin: 12,
};

const RaisedButtonExampleSimple = () => (
  <div>
    <RaisedButton label="Default" style={style} />
    <RaisedButton label="Primary" primary={true} style={style} />
    <RaisedButton label="Secondary" secondary={true} style={style} />
    <RaisedButton label="Disabled" disabled={true} style={style} />
    <br />
    <br />
    <RaisedButton label="Full width" fullWidth={true} />
  </div>
);

export default RaisedButtonExampleSimple;

これで、スタイルは同じファイルで定義されますが、別のファイルで定義して、コンポーネントを使用しているファイルにインポートすることができます。

複数のスタイルを適用する場合は、次のようにスプレッド演算子を使用できます。style={{...style1,...style2}}。

通常、styleプロパティを使用してコンポーネント（ルート要素）内の特定のものをスタイル設定しますが、一部のコンポーネントには、コンポーネントのさまざまな要素をスタイル設定するための複数のプロパティがあります。このページのプロパティの下に http://www.material-ui.com/#/components/raised-button 、RaisedButtonのさまざまな部分のスタイルを設定するためのstyleプロパティ、labelStyle、rippleStyleがあることがわかります。 。

使用しているコンポーネントの下のプロパティを確認し、使用できるスタイルプロパティを確認します。それ以外の場合は、オーバーライドできる使用可能なグローバルスタイルプロパティを確認します。お役に立てれば！

1
Gautam Naik