【React】エラー表示『styles' is not defined no-undef』を改善したい

Question

reactでwebフォームを作成しています。

『'styles' is not defined no-undef'』という表示を改善したいです。

importをしても、スペルも確認したのですが、改善しません。
何方かアドバイスをお願いします。

試したこと
① 'styles' is not defined no-undefで、検索をして、いろんなパターんのimportを試した。

Failed to compile.

src/components/Basic.js
  Line 24:26:   'styles' is not defined  no-undef
  Line 24:42:   'styles' is not defined  no-undef
  Line 25:21:   'styles' is not defined  no-undef
  Line 144:29:  'styles' is not defined  no-undef
  Line 144:45:  'styles' is not defined  no-undef

//src/Basic.js
import React from "react";

import { Link } from "react-router-dom";
import {
  FormControl,
  FormControlLabel,
  FormLabel,
  InputLabel,
  Radio,
  RadioGroup,
  Select,
} from "@mui/material";
import { motion } from "framer-motion";

const Basic = ({ basicProfile, setBasicProfile, isConfirm }) => {
  return (
    <>
      <motion.div
        initial={{ scaleY: 0 }}
        animate={{ scaleY: 1 }}
        exit={{ scaleY: 0 }}
        transition={{ duration: 0.5 }}
      >
        <div style={{ ...styles.page, ...styles.Basic }}>
          <p style={styles.copy}>お客様の情報を入力して下さい</p>
          <div style={{ textAlign: "center" }}>
            <FormControl component="fieldset">
              <FormLabel component="gender">- 性別 -</FormLabel>
              {isConfirm ? (
                <span>{basicProfile?.gender === "male" ? "男性" : "女性"}</span>
              ) : (
                <RadioGroup
                  row
                  aria-label="gender"
                  name="row-radio-buttons-group"
                  value={basicProfile.gender}
                  onChange={(evt) =>
                    setBasicProfile((state) => {
                      return { ...state, gender: evt.target.value };
                    })
                  }
                >
                  <FormControlLabel
                    value="male"
                    control={<Radio />}
                    label="男性"
                  />
                  <FormControlLabel
                    value="female"
                    control={<Radio />}
                    label="女性"
                  />
                </RadioGroup>
              )}
            </FormControl>
          </div>
          <div style={{ textAlign: "center" }}>
            <FormLabel component="legend">- 生年月日 -</FormLabel>
            <FormControl sx={{ m: 1, minWidth: 120 }}>
              <InputLabel htmlFor="grouped-native-select">year</InputLabel>
              {isConfirm ? (
                <span>{basicProfile.year}</span>
              ) : (
                <Select
                  native
                  defaultValue=""
                  id="grouped-native-select"
                  label="Grouping"
                  value={basicProfile.year}
                  onChange={(evt) =>
                    setBasicProfile((state) => {
                      return { ...state, year: evt.target.value };
                    })
                  }
                >
                  <option aria-label="None" value="" />
                  <optgroup label="year">
                    {Array.from(Array(2020), (_, num) => (
                      <option key={num} value={num + 1990}>
                        {num + 1990}
                      </option>
                    ))}
                  </optgroup>
                </Select>
              )}
            </FormControl>
            <FormControl sx={{ m: 1, minWidth: 120 }}>
              <InputLabel htmlFor="grouped-native-select">month</InputLabel>
              {isConfirm ? (
                <span>{basicProfile.month}</span>
              ) : (
                <Select
                  native
                  defaultValue=""
                  id="grouped-native-select"
                  label="Grouping"
                  value={basicProfile.month}
                  onChange={(evt) =>
                    setBasicProfile((state) => {
                      return { ...state, month: evt.target.value };
                    })
                  }
                >
                  <option aria-label="None" value="" />
                  <optgroup label="month">
                    {Array.from(Array(12), (_, num) => (
                      <option key={num} value={num + 1}>
                        {num + 1}
                      </option>
                    ))}
                  </optgroup>
                </Select>
              )}
            </FormControl>
            <FormControl sx={{ m: 1, minWidth: 120 }}>
              <InputLabel htmlFor="grouped-native-select">day</InputLabel>
              {isConfirm ? (
                <span>{basicProfile.day}</span>
              ) : (
                <Select
                  native
                  defaultValue=""
                  id="grouped-native-select"
                  label="Grouping"
                  value={basicProfile.day}
                  onChange={(evt) =>
                    setBasicProfile((state) => {
                      return { ...state, day: evt.target.value };
                    })
                  }
                >
                  <option aria-label="None" value="" />
                  <optgroup label="day">
                    {Array.from(Array(31), (_, num) => (
                      <option key={num} value={num + 1}>
                        {num + 1}
                      </option>
                    ))}
                  </optgroup>
                </Select>
              )}
            </FormControl>
          </div>
          <Link style={{ ...styles.copy, ...styles.link }} to="/Questionnaire">
            次へ
          </Link>
        </div>
      </motion.div>
    </>
  );
};

export default Basic;

Answer 1

実際、このファイルの中のどこにもstylesが定義されてないのに使おうとしているからじゃないでしょうか。

どこかに以下のようなモノが必要です。

const styles = {
    page: {
        // margin: '0' とか
    },
    Basic: {
        
    },
    copy: {

    },
    link: {

    }
}

このファイル内に独自で上記を書いてスタイル定義するか、別のページがあるなら、そちらではどうやってstyle定義してるのかを見てそれを真似る(またはexportされてるならimportする)とかして、stylesを用意すればよいと思います。

Comments

[edu]

umauさん、アドバイス、ありがとうございました！