在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。