Пользовательский интерфейс материала не работает

Question

В Material UI я хочу установить borderRadius для моих кнопок. Проходя style Атрибут, кажется, работает для FlatButton но не для RaisedButton,

За RaisedButton, borderRadius применяется к родителю <div> (что необходимо), но не <button> сам (что тоже необходимо)

Это ошибка в интерфейсе материалов? Или это поведение предназначено? Если он предназначен, то как мне сделать 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>
    );
  };
}

Answer 1

Это предполагаемое поведение, и так сказано в документах. Для записи, вы бы никогда не хотели 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 */
}

---

NB. Разработчики не намерены изменять стили компонентов, которые они не предоставили. Благодаря такому подходу вы в конечном итоге столкнетесь с проблемами.