ReactJS className 未应用于组件答案

【问题标题】：ReactJS className not being applied to componentReactJS className 未应用于组件
【发布时间】：2021-09-25 05:16:43
【问题描述】：

ReactJS 新手问题。我有一个搜索栏组件，如下所示，它包括另外两个组件（LocationLookup 和 EmergencyService），它们都在各自的组件中使用“makeStyles”并且样式没有问题。但是，我正在尝试应用字段分隔符以显示在搜索栏组件中的每个组件之间，但由于某种原因未应用样式。请注意，我尝试添加一些额外的 CSS 以将字体颜色和背景颜色更改为“fieldSeparator”类，以确认问题不在于当前的之前/之后选择器。我添加到“fieldSeparator”中的 CSS 无关紧要，它不适用于这两个组件。仅供参考，“searchBarContainer”CSS 毫无问题地应用于搜索栏容器。不确定这是道具还是状态问题。任何关于我可能做错的提示将不胜感激。提前致谢！

import React from 'react';
import { makeStyles, withStyles } from '@material-ui/core/styles';

import LocationLookup from "./LocationLookup";
import EmergencyService from "./EmergencyService";


const useStyles = makeStyles((theme) => ({
    searchBarContainer: {
        width: "calc(100% - 300px)",
        height: "44px",
        float: "left",
        flexGrow: "1",
        border: "1px solid #989586",
        borderRadius: "9999px",
        backgroundColor: "#fbfbf8",
        margin: "0"
    },
    fieldSeparator: {
        '&::after': {
            content: '""',
            borderRight: "1px solid #ccc9b3",
            position: "absolute",
            top: "10px",
            width: "1px",
            right: "0",
            height: "20px",
            bottom: "0"
        },
        '&::before': {
            content: '""',
            borderRight: "1px solid #ccc9b3",
            position: "absolute",
            top: "10px",
            width: "1px",
            right: "0",
            height: "20px",
            bottom: "0"
        },
        '&:hover': {
            '&::after': {
                display: "none"
            },
            '&::before': {
                display: "none"
            }
        },
    }
}));




export default function SearchBar() {

    const classes = useStyles();

    return (
        <div className={classes.searchBarContainer}>
            <LocationLookup className={classes.fieldSeparator} />
            <EmergencyService className={classes.fieldSeparator} />
        </div>
    );
}```

【问题讨论】：

LocationLookup 和 EmergencyService 组件是否使用类名？ className 应用在外层 div 上？

标签： reactjs

【解决方案1】：

**为什么不改用 HTM/HTML/xml 格式？格式看起来有点混乱......谢谢......结构是基础Webbase还是内核基础？ **

【讨论】：

【解决方案2】：

确保您已像这样深入了解组件的道具：-

const LocationLookup = (props) => {
  return (
    <div {...props}>
      Hello
    </div>
  )
}

【讨论】：

【解决方案3】：

转到您的组件 LocationLookup 和 EmergencyService 并确保它们正确获取道具。

【讨论】：