将 material-ui 标签定位到左侧，左对齐

Question

我正在使用 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>

Answer 1

这是使用组件上的 CSS 覆盖FormControlLabel（封装标签和实际控件）来解决您的问题的简单直接的解决方案。

我们使用 Material-UI 的makeStyles帮助器来定义我们将用来覆盖FormControlLabel. 我们特别希望以该root键为目标（可用 CSS 覆盖键的完整列表可在此处FormControlLabel找到），因此我们命名我们的类以受益于解构和赋值简化。root

我们将从钩子调用classes返回的对象分配useStyles给classeseach的prop 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

在你的组件生成器中：

src/components/ComponentGenerator.js

import React from "react"
import { RadioGroup } from "@material-ui/core"
import MyRadio from "./UI/MyRadio"

class ComponentGenerator extends React.Component {

  // ... stuff here ...

  render() {
    return (
      <RadioGroup
        name="source"
        value={source}
        onChange={this.handleEstablishingChange.bind(this)}
      >
        <MyRadio
          value="switching"
          label={"Switching"}
        />
        <hr />
        <MyRadio
          value="new_source"
          label={"New Service"}
        />
      </RadioGroup>
    )
  }
}

Answer 2

问题

查看 css Material-UI 添加了传入 prop 后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'
      }
    })

看看这个代码和框