Why cant I style this div tag through the css file, it will only work in the html file-CodePudding

This is my Search.js file which is just a file holding the container to my text box that I am trying to style, which will be displayed in my Home.js file

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" style={{display:'flex'}}>
        <SearchIcon className="search__inputIcon" />
        <input />
        <MicIcon />
      </div>        
    </div>
  )
}

export default Search

This is a snippet of my Home.js file where I am calling my Search() function so when I style my search.css file all of the changes should be displayed through my Home.js which is not happening the way I am expecting

<div className='home__body'>
        <img src={logo} alt="" />
        <div className='home__inputContainer'>
          <Search />
        </div>
      </div>
    </div>

This was the first thing I did trying to fix it and it worked until I noticed my display:flex and align-items was not doing what I expected and thats because im doing the .search, .search__input. I just want to access .search__input

.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;
}

This is what I currently have and it works but I would like to keep all of my styling in my css file and I am also able to access the other containers in my Search.js file except this specific container. Any solutions to why that is? Hope my question is clear enough I am new to asking questions here

<div ClassName="search__input" style={{display:'flex'}}>

CodePudding user response：

The issue is your use of ClassName instead of className. This is case-sensitive in React.

It should be:

<div className="search__input">

CodePudding user response：

when you are adding the className property you are writing it with a captial C. it should be:

className=""

not

ClassName=""

uncapitlize the c at the start.