4

マテリアル UI で、ボタンに borderRadius を設定したいと考えています。style属性を渡すと、 では機能するようですFlatButtonが、 では機能しないようですRaisedButton。

の場合RaisedButton、borderRadius は親に適用されますが<div>(これは必要です)、<button>それ自体には適用されません (これも必要です)。

これはマテリアル UI のバグですか? または、この動作は意図されていますか? 意図されている場合、角を丸くした RaisedButton を作成するにはどうすればよいですか?

import React from 'react';
import RaisedButton from 'material-ui/lib/raised-button';
import FlatButton from 'material-ui/lib/flat-button';

export default class MyButtons extends React.Component {

  render() {
    return (
      <div>
        <FlatButton label="flat button" style={{borderRadius: '25px'}}/> {/*works*/}
        <RaisedButton label="raised button" style={{borderRadius: '25px'}} /> {/*does not work*/} 
      </div>
    );
  };
}
4

1 に答える 1

10

これは意図された動作であり、 docs でそう述べています。style記録として、すべての子に渡ってスタイルが意味を成さないため、プロップが複数の子に渡されることは決して望ましくありません。

しかし、ここで懸念を混同していると思います。コンポーネントでの使用styleは、ルート要素にのみ影響を与える必要があります。これは、開発者がスタイル タグを渡すことを選択したことを前提としています。

しかし、あなたがしようとしているのは、コンポーネントのスタイルではなく、コンポーネントの要素のスタイルです。やりたいことは、CSS クラスを使用することです。

<RaisedButton label="raised button" className="raised-button--rounded" />

.raised-button--rounded,
.raised-button--rounded button {
  border-radius: 25px; /* assuming one is not already defined */
}

注意: 開発者は、特に公開していないコンポーネント スタイルを変更することを意図していません。このアプローチでは、最終的に問題が発生します。

于 2016-01-13T21:28:29.300 に答える