Позиционирование метки материала-интерфейса слева с выравниванием по левому краю

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, для classes 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 добавляет при передаче start в labelPlacement prop, свойство

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

Посмотрите на эти коды & box