Вы можете написать реальный код CSS для стилизации ваших компонентов. он также удаляет сопоставление между компонентом и стилем. для меня это лучше, чем CSS / SASS / SCSS. стилизованный компонент
Я использую уже существующий проект из предыдущей статьи. мы сделаем список покемонов более привлекательным с помощью styled-components. вы можете клонировать сюда и использовать ветку init.
1. Добавьте в проект стилизованный компонент.
yarn add styled-components
2. Сделайте компонент заголовка
Например, заголовок, и вы можете попробовать другие позже по-своему. создать папку компонентов в корне. внутри компонента папки создать заголовок папки.
Создайте файл StyledHeader.js и создайте компоненты с помощью styled-components.
import styled from "styled-components"; const StyledHeader = styled.div` padding: 0; margin: 0; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75); `; export default StyledHeader;
Вы можете изменить свой стиль в соответствии со своим стилем. с фоном или чем-то еще.
Поскольку этот файл предназначен только для пользовательского стиля, поэтому нам нужно создать файл index.jsx для представления компонента, такого как общий компонент реакции.
import StyledHeader from "./StyledHeader"; export default function Header() { return ( <StyledHeader> <h1>Pokemon</h1> </StyledHeader> ); }
Давайте визуализируем компонент заголовка в файле MainLayout.js.
import Head from "next/head"; import Header from "../components/Header"; export default function MainLayout(props) { const { children } = props; return ( <> <Head> <title>Pokemon</title> </Head> <Header /> <div>{children}</div> </> ); }
Это работа, но нет стиля, почему? потому что по умолчанию next js SSR. так что мы также должны создать SSR со стилевыми компонентами. давайте изменим _document.js.
import Document, { Html, Head, Main, NextScript } from "next/document"; import { ServerStyleSheet } from "styled-components"; const sheet = new ServerStyleSheet(); class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ // useful for wrapping the whole react tree enhanceApp: (App) => (props) => sheet.collectStyles( <> <App {...props} /> </>, ), // useful for wrapping in a per-page basis enhanceComponent: (Component) => Component, }); // Run the parent `getInitialProps`, it now includes the custom `renderPage` const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; } finally { sheet.seal(); } } render() { return ( <Html lang="en"> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); } } export default MyDocument;
Запустите еще раз, и все готово. но у тела все еще есть отступы или поля.
3. Создайте глобальный стиль с помощью styled-components.
Нам нужно изменить стиль нашего тела. вы можете сделать это с помощью глобального CSS с помощью next js, но это снова CSS / sass, так что не делайте этого, и давайте снова изменим _document.js с помощью стилизованного компонента (документ здесь). вы можете добавить другие, например шрифт или что-нибудь еще.
import Document, { Html, Head, Main, NextScript } from "next/document"; import { ServerStyleSheet, createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { padding: 0; margin: 0; } `; class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ // useful for wrapping the whole react tree enhanceApp: (App) => (props) => sheet.collectStyles( <> <GlobalStyle /> <App {...props} /> </>, ), // useful for wrapping in a per-page basis enhanceComponent: (Component) => Component, }); // Run the parent `getInitialProps`, it now includes the custom `renderPage` const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; } finally { sheet.seal(); } } render() { return ( <Html lang="en"> <Head /> <body> <Main /> <NextScript /> </body> </Html> ); } } export default MyDocument;
4. Измените стиль с помощью реквизита.
Стилизованные компоненты получают значение реквизита при стилизации. так что мы можем настраивать стиль компонента с помощью props, вот так.
import styled from "styled-components"; const StyledHeader = styled.div` padding: 0; margin: 0; ${(props) => props.height && `height: ${props.height}px;`}; box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75); `; export default StyledHeader; import StyledHeader from "./StyledHeader"; export default function Header({ height }) { return ( <StyledHeader height={height}> <h1>Pokemon</h1> </StyledHeader> ); }
Вы можете попробовать что-нибудь еще в этом роде. попробуйте размер шрифта или все, что вам нужно, чтобы сделать его более привлекательным.
Далее я поделюсь темой и расширю стили-компоненты для компонентов библиотеки.
Прокомментируйте ниже, если вы знаете какие-либо другие способы, похвалы или вопросы. Спасибо :)