а должно что?

тут в самом jsx, это немного неудобно

Как использовать css фреймворки вместе со styled-components?

То и должно

в чем проблема тогда?

есть еще компонент по типу Box, но только зачем юзать mui и делать стили через обычный css?

А, дело в том что вообще ничего не сетит

а что в стейте?

this.state = { input: '', result: [] };

а что после setState ?

Вот фул export default class Autocomplete extends React.Component {
 constructor(props) {
   super(props);
   this.state = { input: '', result: [] };
 }
   
   handleChange = async (e) => {
   const res = await axios.get('/countries', { params: { term: e.target.value } })
   .then(res => {
     this.setState({ result: res.data, input: e.target.value });
   })
 }
 
 render() {
   const { input, result } = this.state;
   
     const ul =
    <ul>
      { result.map((item) => {
        return <li key={ item }> { item } </li> })
      }
    </ul>;
           
   return (
   <div>
       <form>
         <div className="form-group">
           <input onChange={ this.handleChange } type="text" className="form-control" placeholder="Enter Country" value={ input } />
         </div>
       </form>
         {ul}
     </div>
   );
 }
 componentDidUpdate() {
   console.log(this.state);
   }
}

Народ, есть массив задач, у каждой есть id задачи и др. Некоторые поля массива меняются с приходом обновлений от сервера. Проблема в том, что когда задача открывает portal modal, после прихода обновлений, весь массив переписывается и portalmodal закрывается

Как быть и что делать для решения проблемы

новичек, мб туплю в чем... почему-то не применяются стили, кроме декларирования стилей импорта и непосредственно применения нужно что-то еще делать?

А ты модули используешь? Если это cra - то нэйминг должен быть жестким [name].module.css

css файл ж, просто import './Layout.css' напиши

и юзай className=".Content"

/Layout

вот это помогло, без точки только. большое спасибо

пока не сталкивался с ними