소개

이번에는 React UI 구성 요소 프레임워크의 "Material-UI"를 사용하여 다음과 같은 라디오 양식을 만듭니다.

포인트

기본적으로 Material-UI 디폴트 스타일로 작성

여러 컴포넌트를 조합하여 만든다

레이블의 글꼴 크기 변경 정보

마크업 구성

<FormControl> 컴퍼넌트로, Form의 영역을 확보해,<RadioGroup> 컴포넌트로 래핑된 항목 목록( <Radio> 컴포넌트)을 배치합니다.
이번에는 레이블을 <FormControlLabel> 구성 요소를 사용합니다.

다음 구성입니다.

return (
  <FormControl>
    {/* グループにラベル */}
    <FormLabel />
    {/* ラジオグループ */}
    <RadioGroup>
　　  {/* リスト */}
      <FormControlLabel>
        <Radio />
      </FormControlLabel>
      ...
    </RadioGroup>
  </FormControl>
)

소스 코드

각각이 선택되었을 경우의 처리를 추가해 완성입니다.

import React from "react";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import { makeStyles } from "@material-ui/core/styles";
import "./styles.css";

export default function App() {
  const [value, setValue] = React.useState("React");
  const classes = styles();

  const handleChange = event => {
    // クリックされたら、valueの値をsetします。
    setValue(event.target.value);
  };

  return (
    <div className="App">
      <FormControl component="label">
        <FormLabel component="label">JavaScript framework</FormLabel>
        <RadioGroup
          name="JavaScript framework"
          value={value}
          onChange={handleChange}
        >
          <FormControlLabel
            value="React"
            control={<Radio />}
            label="React"
          />
          <FormControlLabel
            value="Vue.js"
            control={<Radio />}
            label="Vue.js"
          />
          <FormControlLabel
            value="AngularJS"
            control={<Radio />}
            label="AngularJS"
          />
          <FormControlLabel
            value="jQuery"
            disabled
            control={<Radio />}
            label="jQuery"
          />
        </RadioGroup>
      </FormControl>
    </div>
  );
}

라벨의 글꼴 크기를 변경하고 싶습니다.

Material-UI의 기본 디자인으로 사용할 수 있으면 위에서 좋지만,
좀처럼 디자인 괴롭히지 않고 사용할 수 있으면 기회는 적을까 생각합니다.

이번에는 라벨의 글꼴 크기를 변경해 보겠습니다.

FormControlLabel의 구조 정보

<FromControlLabel> 컴퍼넌트는, 크고, control property로 지정한 엘리먼트 ( Radio ・ Switch ・ Checkbox )와 「라벨」의 2개로 구성되어 있습니다.

공식 참조에 따르면 라벨의 기본 스타일은 Typography 스타일이 맞는 것 같습니다.

Styles applied to the label's Typography component.

label 속성에 요소를 적용하여 덮어쓰기

텍스트로 그대로 보내지 않고,.

<FormControlLabel
  value="React"
  control={<Radio />}
  label={<span className={classes.labelRoot}>React</span>}
/>

소개한 내용의 Sandbox