麻烦中心并减少材料-ui RadioButton的涟漪效应的大小

时间:2017-08-14 21:45:34

标签: reactjs material-ui

在React的Material-UI组件中减小RadioButton的大小时,涟漪效应会偏离中心而且太大。我似乎无法找到任何风格的道具来控制它。这是一个有效的代码。

const { MuiThemeProvider, getMuiTheme, RadioButtonGroup, RadioButton } = MaterialUI;

class RadioDemo extends React.Component {

  render() {
    return (
      <RadioButtonGroup
        name="orientation"
        style={{marginTop: 20, marginBottom: 20, display: 'flex' }}
        required={true}
        validationError="This field is required."
      >
        <RadioButton value="1" label="button1" 
          style={styles.radioButton.style}
          labelStyle={styles.radioButton.label}
          iconStyle={styles.radioButton.icon}
          inputStyle={styles.radioButton.input}
        />

        <RadioButton value="2" label="button2"
          style={styles.radioButton.style}
          labelStyle={styles.radioButton.label}
          iconStyle={styles.radioButton.icon}
          inputStyle={styles.radioButton.input}
        />
      </RadioButtonGroup>
    );
  }

}

const styles = {
  radioButton: {
        style: {
            width: "140px"
        },
        label: {
            width: "100px",
            fontSize: "14px",
            padding: "0px",
            textAlign: "left"
        },
        icon: {
            heigh: "14px",
            width: "14px",
            padding: "0px",
            marginRight: "8px"
        },
        input: {
            width: "100px"
        }
   }
};




const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <RadioDemo />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

链接到jsfiddle: http://jsfiddle.net/brentjm/bppxsopw/7/

animation-offcentered-radiobutton

其他细节: npm版本4.2.0

一些package.json依赖项:

"react": "^15.2",
"react-dom": "^15.0.1",
"material-ui": "0.18.3",
"babel-preset-react": "^6.5.0"

devDependencies

"webpack": "^1.13.1"

我没有使用react-toolbox。

0 个答案:

没有答案