Как стилизовать react функцию с помощью styled-components?

Question

[Zukrine]

Хочу научиться писать в стиле css in js, использую библиотеку styled-components. Если передаю параметры как в документации (через константу), то все работает прекрасно:

const Main = styled.main`
  background-color: black;
  height: 100vh;
`

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

Но если пытаюсь стилизовать сам компонент App, то либо получаю ошибку о том, что стилизовать функцию невозможно и ничего не происходит, либо вообще краш. Пробовал всякие способы, но единственное, что сработало, это когда просто вызвал App.styled."propiertyName". Но при этом IDE ругалась, поэтому явно неправильный способ. А можно ли, собственно, это сделать?

Comments

[WbICHA]

Не совсем понятно что значит "стилизовать сам компонент App"? Что в нём стилизовывать? У него нет ни класса, ни стилей, это просто функция. Это тоже самое, что применить класс на компонент.

Answer 1

[Сергей Соколов]

Посмотрел их документацию. Там приводят пример именно с обёрткой в заготовленный стилизованные тег.

Т.е. «сам» компонент не стилизуют.

const Main = styled.main`
  background-color: black;
  height: 100vh;
`

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

Comments

[Zukrine]

Да, видимо только такой способ и есть. Ну ладно тогда, буду по старинке пока через css