реагировать, как можно подобрать ширину div как Android Wrap-контент?

Question

const SearchBar = (text, onChange) => {
  return (
    <div>
      <div style={{flexWrap: "wrap", background: 'red', border: "1px solid", borderRadius: 10}}>
        <Search style={{background: 'blue', verticalAlign: 'bottom'}}/>
        <input style={{background: 'blue', verticalAlign: 'bottom'}}
          text={text} onChange={onChange}/>
      </div>
    </div>
  );
};

export default SearchBar;

Вот мой поисковый штрих-код. Результат равен

, но я хочу, чтобы это выглядело так.

Как получить результат?

Answer 1

Сначала импортируйте FaSearch, затем замените ваш код на указанный ниже.

import { FaSearch } from "react-icons/fa";

const App =(text, onChange)=> {
  return (
    <>
      <div style={styles.mainStyle}>
        <Search />
        <input style={styles.inputStyle} text={"text"} onChange={null} />
      </div>
    </>
  );
}
const Search = () => <FaSearch style={styles.search} />;
const styles = {
  mainStyle: {
    display: "flex",
    flexWrap: "wrap",
    borderRadius: 10,
    alignItems: "center",
    border: "1px solid",
    overflow: "hidden"
  },
  inputStyle: { 
    flex: 1,
    border: "none",
    height: 30
  },
  search: {
    fontSize: 30,
    padding: "0px 10px",
    cursor: "pointer",
    borderRight: '1px solid grey'
  }
};

Answer 2

В вашем Search компоненте сделайте ширину равной 100%.

<Search style={{background: 'blue', verticalAlign: 'bottom', width:'100%'}}/>