Вы можете написать реальный код 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>
);
}

Вы можете попробовать что-нибудь еще в этом роде. попробуйте размер шрифта или все, что вам нужно, чтобы сделать его более привлекательным.

Далее я поделюсь темой и расширю стили-компоненты для компонентов библиотеки.

См. Проект здесь

Прокомментируйте ниже, если вы знаете какие-либо другие способы, похвалы или вопросы. Спасибо :)