獲取 class 為 react.js 中的 img 標簽未定義

Question

Getting class as undefined for img tag in react.js This is the component Header.jsx, Here is the Header.jsx I'm using <img> , but the CSS properties are not not being implemented in the image, and I'm得到錯誤作為class=undefined

import React from 'react';
import classes from './header.css';
import { Box,Grid, Typography} from '@mui/material';

const Header = () => {
  return (
    <>
      <Box sx={{ flexGrow: 1 }}>
        <Grid container spacing={3}>
          <Grid item xs>
            <img src='./images/logo.svg' className={`${classes.header__logo}`} alt='Logo'/>
          </Grid>
          <Grid item xs={6}>
              <Typography>gbr</Typography>
          </Grid>
          <Grid item xs>
              <Typography>gbr</Typography>
          </Grid>
        </Grid>
      </Box>
    </>
  )
}

export default Header

這是 header 的 css 文件

/* header.css */

.header__logo{
    height: 20px;
    width: 50px;
}
    

在控制台中，我收到此錯誤， class="undefined"

<img src="./images/logo.svg" class="undefined" alt="Logo">

Answer 1

就那樣做吧：基本概念

import React from 'react';
import './header.css';
import { Box,Grid, Typography} from '@mui/material';

const Header = () => {
  return (
    <>
      <Box sx={{ flexGrow: 1 }}>
        <Grid container spacing={3}>
          <Grid item xs>
            <img src='./images/logo.svg' className="header__logo" alt='Logo'/>
          </Grid>
          <Grid item xs={6}>
              <Typography>gbr</Typography>
          </Grid>
          <Grid item xs>
              <Typography>gbr</Typography>
          </Grid>
        </Grid>
      </Box>
    </>
  )
}

export default Header

Answer 2

當我做這個命名約定時，我確保有一個父標簽帶有你試圖擴展的類名，在這種情況下是“標題”，如果你使用 SCSS 也有幫助，試試這樣的事情：

import React from 'react';
import classes from './header.scss';
import { Box,Grid, Typography} from '@mui/material';

const Header = () => {
  return (
    <div className={`${classes.header}`>
      <Box sx={{ flexGrow: 1 }}>
        <Grid container spacing={3}>
          <Grid item xs>
            <img src='./images/logo.svg' className={`${classes.header__logo}`} alt='Logo'/>
          </Grid>
          <Grid item xs={6}>
              <Typography>gbr</Typography>
          </Grid>
          <Grid item xs>
              <Typography>gbr</Typography>
          </Grid>
        </Grid>
      </Box>
    </>
  )
}

export default Header

在你的'./header.scss'里面

.header {
  // css style for header class

  &__logo {
    // css style code for logo class
  }
}

我發現，它返回 undefined 因為它沒有正確放置在樣式表中的正確位置。 您的反應代碼看起來不錯，只是缺少一些東西。