将Material-ui标签定位在左侧，并保持左对齐 [英] Positioning material-ui label to the left with left alignment

问题描述

我正在使用material-ui.com上提供的单选按钮组件，并且已设置labelPlacement="start".这样可以将标签放在左侧，但是我也希望标签保持对齐，而将单选按钮保留在右侧.

I'm using the radio button components available from material-ui.com and have set labelPlacement="start". This has placed the label on the left side, but I would also like the labels to be left aligned while leaving the radio buttons on the right.

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

推荐答案

这是一个简单的&在FormControlLabel组件(封装了标签和实际控件)上使用CSS覆盖，可以直接解决您的问题.

Here is a simple & straightforward solution to your problem using CSS override on the FormControlLabel component (which encapsulates both the label and the actual control).

我们使用Material-UI的makeStyles帮助器来定义用于覆盖默认样式FormControlLabel的类.我们特别希望定位root键(FormControlLabel的可用CSS替代键的完整列表可用

We use Material-UI's makeStyles helper to define the class we'll use to override the default styling of FormControlLabel. We specifically want to target the root key (the full list of available CSS override keys for FormControlLabel is available here), hence we name our class root to benefit from destructuring and assignment simplification.

我们将从useStyles钩子调用返回的classes对象分配给每个FormControlLabel的classes道具.这种分配的长形式为classes={{ root: classes.root }}，但是由于我们将类命名为root(这是我们要定位的键的名称)，因此我们可以简单地编写classes={classes}.

We assign the classes object returned from the useStyles hook call to the classes prop of each FormControlLabel. The long-form of that assignment would be classes={{ root: classes.root }} but because we named our class root (which is the name of the key we're targeting) we can simply write 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);

工作中的codeandbox演示

假设您有以下代码(将失败):

Say you have the following code (which will fail):

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>
    )
  }
}

一种解决方案是外部化使用钩子的内部组件:

A solution is to externalize the inner component that uses hooks:

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

并在您的组件生成器中:

and in your component generator:

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>
    )
  }
}

这篇关于将Material-ui标签定位在左侧，并保持左对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！