我正在使用material-ui.com上提供的单选按钮组件,并且已设置labelPlacement="start"
。这样可以将标签放在左侧,但是我也希望标签保持对齐,而将单选按钮保留在右侧。
<RadioGroup
name="switching"
value="switching"
onChange={this.handleEstablishingChange.bind(this)}
>
<FormControlLabel value="switching" control={<Radio />} labelPlacement="start" label={this.props.lang().justswitching} />
<hr />
<FormControlLabel value="new_source" control={<Radio />} labelPlacement="start" label={this.props.lang().newsource} />
</RadioGroup>
答案 0 :(得分:1)
问题
查看了CSS材质后,UI在start
道具中传递了labelPlacement
并添加了属性
flex-direction: row-reverse;
因此,期望元素从末尾开始(水平)。
解决方案
解决方法是添加一个属性
justifyContent: 'space-between';
转到labelPlacementStart
类。
<FormControlLabel
value="new_source"
control={<Radio />}
labelPlacement="start"
label={"World"}
classes={{
labelPlacementStart: classes.labelPlacementStart
}}
/>
const STYLES = theme => createStyles({
labelPlacementStart: {
justifyContent: 'space-between'
}
})
答案 1 :(得分:1)
这是在FormControlLabel
组件(封装了标签和实际控件)上使用CSS覆盖来解决您的问题的简单明了的解决方案。
我们使用Material-UI的makeStyles
帮助程序来定义用于覆盖FormControlLabel
的默认样式的类。我们特别希望定位root
键(here可获得FormControlLabel
的可用CSS替代键的完整列表),因此我们将类root
命名为可受益于结构分解和简化分配。
我们将classes
钩子调用返回的useStyles
对象分配给每个classes
的{{1}}道具。这种分配的长形式为FormControlLabel
,但是由于我们将类命名为classes={{ root: classes.root }}
(这是我们要定位的键的名称),因此我们可以简单地编写root
。>
classes={classes}
假设您有以下代码(将失败):
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "@material-ui/core/styles";
import { RadioGroup, FormControlLabel, Radio } from "@material-ui/core";
const useStyles = makeStyles({
root: {
// component default is "inline-flex", using "flex" makes the
// label + control group use the entire width of the parent element
display: "flex",
// component default is "flex-start", using "space-between" pushes
// both flexed content to the right and left edges of the flexbox
// Note: the content is aligned to the right by default because
// the 'labelPlacement="start"' component prop changes the flexbox
// direction to "row-reverse"
justifyContent: "space-between",
},
});
const App = () => {
const [source, setSource] = useState("switching");
const classes = useStyles();
return (
<div>
<RadioGroup
name="source"
value={source}
onChange={e => setSource(e.target.value)}
>
<FormControlLabel
value="switching"
control={<Radio />}
labelPlacement="start"
label={"Switching"}
classes={classes}
/>
<hr />
<FormControlLabel
value="new_source"
control={<Radio />}
labelPlacement="start"
label={"New Service"}
classes={classes}
/>
</RadioGroup>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
一种解决方案是外部化使用钩子的内部组件:
import React from "react"
import { RadioGroup, FormControlLabel, Radio } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"
const useStyles = makeStyles({
root: {
display: "flex",
justifyContent: "space-between",
},
})
class ComponentGenerator extends React.Component {
// ... stuff here ...
render() {
const classes = useStyles() // <-- NO! Not a functional component & not
// top-level, hooks cannot be used here
return (
<RadioGroup
name="source"
value={source}
onChange={this.handleEstablishingChange.bind(this)}
>
<FormControlLabel
value="switching"
control={<Radio />}
labelPlacement="start"
label={"Switching"}
classes={classes}
/>
<hr />
<FormControlLabel
value="new_source"
control={<Radio />}
labelPlacement="start"
label={"New Service"}
classes={classes}
/>
</RadioGroup>
)
}
}
并在您的组件生成器中:
src/components/UI/MyRadio.js
import { FormControlLabel, Radio } from "@material-ui/core"
import { makeStyles } from "@material-ui/core/styles"
const useStyles = makeStyles({
root: {
display: "flex",
justifyContent: "space-between",
},
})
const MyRadio = ({ value, label }) => {
const classes = useStyles() // <-- YES! Functional component & top-level
return (
<FormControlLabel
value={value}
control={<Radio />}
labelPlacement="start"
label={label}
classes={classes}
/>
)
}
export default MyRadio