(翻译+笔记）学习next.js官网内容-chapter2：CSS Styling

最新推荐文章于 2024-07-22 16:24:23 发布

wugemiao

最新推荐文章于 2024-07-22 16:24:23 发布

阅读量827

点赞数 19

分类专栏： react学习文章标签：笔记学习 javascript 前端框架

本文链接：https://blog.csdn.net/wugemiao/article/details/139067935

版权

react学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文档声明

本文档是作者在学习react过程中，阅读react中文官网建议使用的next.js的官网课程的个人翻译，间或有作者本人的理解，如有错误，欢迎评论指出。

正文开始_CSS Styling

原地址链接： https://nextjs.org/learn/dashboard-app/css-styling
还记得上一节启动dev服务、访问本地地址http://localhost:3000时候出现的界面么？是一个简陋的小页面，上面有一个大大的蓝色箭头？就像这样：
在这里插入图片描述 Currently, your home page doesn’t have any styles. Let’s look at the different ways you can style your Next.js application.
当前，你的主界面没有任何样式。让我们一起来看看你能够定义你的next.js应用样式的不同方式。

In this chapter…
Here are the topics we’ll cover：

How to add a global CSS file to your application.
Two different ways of styling: Tailwind and CSS modules.How to conditionally add class names with the clsx utility package.
在本章节……
这些是我们将要讨论的话题：
怎样把一个全局CSS文件添加到你的应用。
添加样式的两种不同的方式：TailwindCSS（https://tailwind.nodejs.cn/docs/installation）和CSS模块。怎么使用clsx工具包（这是一个非常轻量级的JavaScript库，用于快速有效生成需要的样式类字符串）有条件地添加类名。

tailwind :顺风 n.名词
conditionally：adv. 有条件地，依据条件而定地；

Global styles全局样式

If you look inside the /app/ui folder, you’ll see a file called global.css. You can use this file to add CSS rules to all the routes in your application - such as CSS reset rules, site-wide styles for HTML elements like links, and more.
如果到 /app/ui 文件夹里面看看，你将会看到一个叫做global.css.的文件。你可以使用这个文件来添加CSS规则到你项目下的所有路经（就是指，指定项目下路径来定义那个前端页面代码样式吧？）——例如为像链接或者其他的HTML页面元素来设定CSS重设规则，站点宽度的样式。

You can import global.css in any component in your application, but it’s usually good practice to add it to your top-level component. In Next.js, this is the root layout (more on this later).
你可以在你项目下的任意组件中导入 global.css ，但是通常好的实践方式是把 global.css 导入到你的顶级组件下。在 Next.js中，这个顶级组件是跟布局（root layout），稍后会学习这个。

当前的/app/layout.tsx代码是这样的：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

没有导入任何的样式，接下要开始操作了：

Add global styles to your application by navigating to /app/layout.tsx and importing the global.css file:
添加全局样式到你的应用需要通过 1.导航到/app/layout.tsx 文件2. 导入 global.css 文件。
就是在上面原始的layout代码最上面，添加代码行：
ps: 使用vscode来import导入时候前面目录可以选择，最后css没有选项，手动输入文件名。

import '@/app/ui/global.css';
//下面是原来的layout代码

With the development server still running, save your changes and preview them in the browser. Your home page should now look like this:
在开发服务仍在运行时候（没在运行就重新nom run dev），保存你的代码更改（因为保存之后，服务才会保存代码刷新界面）然后在浏览器预览他们。你的主界面现在应该看起来是这样：
But wait a second, you didn’t add any CSS rules, where did the styles come from?
If you take a look inside global.css, you’ll notice some @tailwind directives:
但是等一下，你没有添加任何的CSS规则，那么这些样式来自哪里呢？
如果去看看global.css文件，将会注意到一些 @tailwind指示：

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind is a CSS framework that speeds up the development process by allowing you to quickly write utility classes directly in your TSX markup.
Tailwind 是一种CSS框架，这种框架通过允许你直接地在你的tsx标记中快速地写工具类来加快开发进程。

In Tailwind, you style elements by adding class names. For example, adding the class “text-blue-500” will turn the <h1> text blue:
在Tailwind中，你通过添加类选择器名来为html元素定义样式。例如，增加"text-blue-500" 类来把标签<h1> 变成蓝色文本：

<h1 className="text-blue-500">I'm blue!</h1>

Although the CSS styles are shared globally, each class is singularly applied to each element. This means if you add or delete an element, you don’t have to worry about maintaining separate stylesheets, style collisions, or the size of your CSS bundle growing as your application scales.
尽管CSS样式已经全局地被分享了，每个类选择器单独地应用在每个元素上。这意味着如果你添加或者删除一个元素，不必担心要去维护单独的样式表、样式冲突或者随着你的应用规模而增大的你的CSS包的大小。

maintain：保持，认为，维护，供养；
collision：碰撞，冲突；
bundle：包，束，捆；
singular: 单数的，单个的；特异的
scale：规模，等级，秤，刻度，比例；v:改变……大小

When you use create-next-app to start a new project, Next.js will ask if you want to use Tailwind. If you select yes, Next.js will automatically install the necessary packages and configure Tailwind in your application.
当你使用 create-next-app来开始一个新的项目，next.js将会问你是否需要使用tailwind。如果你选择yes（y），next.js将会自动地下载必需的包文件并且为你的项目配置好Tailwind 。

If you look at /app/page.tsx, you’ll see that we’re using Tailwind classes in the example.
如果你观察/app/page.tsx文件，将会发现我们正在例子中使用Tailwind 类。

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
 
export default function Page() {
  return (
    // These are Tailwind classes:
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
    // ...
  )
}

Don’t worry if this is your first time using Tailwind. To save time, we’ve already styled all the components you’ll be using.
如果这是你第一次使用Tailwind，不要担心。为了节约时间，我们已经为所有你将会使用的组件定义好了样式。
Let’s play with Tailwind! Copy the code below and paste it above the <p> element in /app/page.tsx：
让我们用Tailwind开始吧！复制下面的代码，并把它粘贴在/app/page.tsx的段落标签 <p> 上面：

<div
  className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent"
/>

试一试，你会看到什么？

没错你将会看到一个小三角，
正如下所示：

If you prefer writing traditional CSS rules or keeping your styles separate from your JSX - CSS Modules are a great alternative.
如果你更喜欢传统的CSS规则或者更喜欢让你的样式独立于你的JSX，那么CSS模块是一个很好的选择。

alternative：形容词adj. 可供选择的，可替代的；

CSS模块

CSS Modules allow you to scope CSS to a component by automatically creating unique class names, so you don’t have to worry about style collisions as well.
CSS模块允许你通过自动地创建唯一独特的类名来标记CSS作用域到组件上的范围，这样你就不需要担心样式冲突了。

We’ll continue using Tailwind in this course, but let’s take a moment to see how you can achieve the same results from the quiz above using CSS modules.
在这节课我们将会继续使用Tailwind ，但是让我们先等一下来看看你怎么使用CSS模块来完成来自上面同三角形一样的结果。
（ps: quiz小测验是官网在问，执行把div复制粘贴到<p>标签上面之后网页出现的结果。）

Inside /app/ui, create a new file called home.module.css and add the following CSS rules:
在 /app/ui目录下，创建一个叫做home.module.css 的新文件并添加一个如下的CSS规则：

.shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

Then, inside your /app/page.tsx file import the styles and replace the Tailwind class names from the <div> you’ve added with styles.shape:
然后，在 /app/page.tsx文件中导入这个样式并且从你已经用styles.shape样式的 <div> 标签中替换Tailwind 类名。
就是在上面添加的那行标签的类名进行更改，改前是一段语句描述该div处样式，改后是导入样式。）

import styles from '@/app/ui/home.module.css';
<div className={styles.shape} />;

Save your changes and preview them in the browser. You should see the same shape as before.
保存你的更改并且在浏览器预览他们。你应该看到和之前一样的shape图像。

Tailwind and CSS modules are the two most common ways of styling Next.js applications. Whether you use one or the other is a matter of preference - you can even use both in the same application!
Tailwind 和CSS modules是两种最常见的定义Next.js 应用样式的方法。无论你使用哪一种都仅仅是喜好的问题，你甚至还可以在应用程序中两种都使用。

Using the clsx library to toggle class names

toggle ：v.切换，拴住；n. 切换开关。

使用clsx库来切换类名

There may be cases where you may need to conditionally style an element based on state or some other condition.
可能会有这样的情况，你可能需要依据状态state或者其他的一些条件来有条件地定义一个元素的样式。

clsx is a library that lets you toggle class names easily. We recommend taking a look at documentation for more details, but here’s the basic usage:
clsx 是一个能够让你容易地切换类名的库。我们建议你可以看看clsx的文档来获取到更多的，但是这有基础的用法：

Suppose that you want to create an InvoiceStatus component which accepts status. The status can be 'pending' or 'paid'.
假设你想要创建一个 InvoiceStatus组件，这个组件可以接受 status状态。这个状态 status就可以是“待处理”或者“已付款”。

pend: v. 悬而未决，有待，暂停；
paid: 有偿的，付费的，

If it’s ‘paid’, you want the color to be green. If it’s ‘pending’, you want the color to be gray.
如果状态是“已付款”的，你想要颜色变成绿色。如果状态是“待处理”颜色是灰色的。

You can use clsx to conditionally apply the classes, like this:
你可以使用clsx来依据条件地申请类，就像这样：

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}