React中search__input容器无法通过CSS文件设置样式的问题求助

开发者阿泽

2026-8-24

React组件样式不生效问题排查与解决

问题根源

你遇到的核心问题是React组件中类名属性拼写错误：在Search.js的代码里，你把React的类名属性写成了大写的ClassName，而React要求类名必须使用小写的className。大写的ClassName会被React当作普通自定义属性处理，不会渲染成HTML的class属性，导致CSS文件中的.search__input选择器无法匹配到该元素，自然无法生效——只有内联style能直接作用于元素，所以你看到内联样式有效。

解决方案

修正类名属性拼写
把Search.js中错误的ClassName改成小写的className，去掉内联style：

import React from 'react';
import './Search.css';
import SearchIcon from '@material-ui/icons/Search';
import MicIcon from '@material-ui/icons/Mic';

function Search() {
  return (
    <div className='search'>
      <div className="search__input">
        <SearchIcon className="search__inputIcon" />
        <input />
        <MicIcon />
      </div>        
    </div>
  )
}

export default Search

单独编写.search__input的CSS样式
在Search.css中单独为.search__input设置样式，不需要和.search共用规则，避免样式冲突：

/* 如果需要给外层.search容器设置样式，单独写在这里 */
.search {
  /* 示例：可添加外层容器的间距等样式 */
}

.search__input {
  display: flex;
  align-items: center;
  border: 1px solid lightgray;
  height: 30px;
  padding: 10px 20px;
  border-radius: 999px;
  width: 75vw;
  margin: 0 auto;
  margin-top: 40px;
  max-width: 560px;
}