Блог

В настоящее время я пытаюсь использовать styled-components с Create-react-app (CRA), и в прошлом это работало прекрасно, но сейчас оно почти не работает. Стиль часто обновляется не сразу, и мне часто приходится перезагружать страницу, чтобы действительно увидеть изменения.

Когда я добавил новый компонент в App.js , мое приложение react вошло бы в стадию непрерывной загрузки

App.js

 function App() {
  return (
    <div className="App">
      <Navbar />
      <Main />
    </div>
  );
}
 

Main.js

 export default function Main(props) {
    

    return (
        <p>Hey world</p>

    )
}

 

Navbar.js

 export default function Navbar(props) {
    let result = sizeResu<
    console.log(result);
    

    return (
        
        <Header fixed flex align='center' fullWidth radius='0px'>
           <Container fill='none' size='lg' flex align='center' justify='space-between'>
              <Menu>
                 <Title>Kahoot</Title>
                 <MenuItem>Home</MenuItem>
                 <MenuItem>Discover</MenuItem>
                 <MenuItem>Kahoots</MenuItem>
              </Menu>   
               <Menu>
                 <Button padding='8px 12px' variant='fill' fill='#fff'>
                    <Subtitle size='16px' color='#46178f'>Create</Subtitle>
                 </Button>
                 <MenuItem>Fairy121</MenuItem> 
               </Menu>
           </Container>
       </Header>
    )
}
 

Вывод терминала

Скомпилировано с предупреждениями.

srcApp.js Строка 1: 8: «логотип» определен, но никогда не использовался
no-unused-vars Строка 3:9: «Контейнер» определен, но никогда не использовался no-unused-vars Строка 3:19: «Кнопка» определена, но никогда не использовалась
no-unused-vars Строка 5:8:’Main’ определен, но никогда не использовался
no-unused-vars

Выполните поиск по ключевым словам, чтобы узнать больше о каждом предупреждении. Чтобы игнорировать, добавьте // eslint-disable-next-line к предыдущей строке.