Remix如何支持原生 CSS方法详解

更新时间：2023年05月06日 10:31:14 作者：乔治_x

这篇文章主要为大家介绍了Remix如何支持原生CSS的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

Remix CSS 语法

Remix 是一个多页面的框架，对页面的原生 CSS 的支持分为两大类型：

使用 links 函数，转换成 link 标签支持 css
使用 javascript import 语法支持 css ，但是最终也会成为 link 标签
驼峰命名法

.PrimaryButton {
  /* ... */
}

html 属性法

[data-primary-button] {
  /* ... */
}

links 函数写法

rel
href
media

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
import globalStyleHref from '~/styles/globalStyleHref'
export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: globalStyleHref,
      media: "(min-width: 1280px)",
    },
  ];
};

links 函数层级

root 级，添加全局样式

定义全局样式
在 root.tsx links 函数中添加全局样式

import globalStylesHref from '~/styles/global.css'
export const links: LinksFunction = () => [
  { rel: "stylesheet" , href: globalStylesHref },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

route 级，添加路由级样式

定义 route 级样式
在 routes/xxx.tsx links 函数中引入样式

import ArticleStylesHref from "~/styles/article.css";
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: ArticleStylesHref },
];

nest route 级，添加嵌套路由样式

理解嵌套路由（配合 <Outlet /> 使用）
定义 nest route 级样式
在 routes/xxx.yyy.tsx links 函数中引入 nest 样式

import articleDetailStylesHref from "~/styles/article.detail.css";
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: articleDetailStylesHref },
];

这以文章和文章详情作为嵌套路由，方便理解。

links 函数中 css 媒体查询

media 属性, 一般用于断点，暗黑模式等

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: mainStyles,
    },
    {
      rel: "stylesheet",
      href: largeStyles,
      media: "(min-width: 1024px)",
    },
    {
      rel: "stylesheet",
      href: xlStyles,
      media: "(min-width: 1280px)",
    }
  ];
};
import ArticleStylesHref from "~/styles/article.css";
import Article1024StylesHref from '~/styles/article-1024.css'
import Article1208StylesHref from '~/styles/article-1280.css'
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: ArticleStylesHref },
  { rel: "stylesheet", href: Article1024StylesHref, media: "(min-width: 1024px)", },
  { rel: "stylesheet", href: Article1208StylesHref, media: "(min-width: 1280px)" },
];

第三方 css

href 属性直接访问第三方地址：

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: "https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css",
    },
  ];
};

import 语法

import 语法需要配合 remix 提供的 @remix-run/css-bundle 包使用：

import { cssBundleHref } from "@remix-run/css-bundle";
export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

此时就可以直接使用 import './xxx.css' 文件，这与 webpack css-loader 提供的能力相当了。

小结

remix 对 css 支持已经比较成熟，市面上主流的 css 方案都正式在 v1.16.0 版本中稳定支持。
remix 通过 links 韩式支持原生 css 的 link 比标签，设计上有一一对应的关系。
同时也支持了使用 import 语法支持，本质是主动的加上 link 标签
同时支持不同层级的 css 初次使用时，需要理解 root/route/nest-route 的内容
remix links 页支持了 css 的媒体查询功能，能在 links 中定义媒体查询断点

以上就是Remix如何支持原生 CSS的详细内容，更多关于Remix支持原生 CSS的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React元素与组件的区别示例详解
这篇文章主要为大家介绍了React元素与组件的区别示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
react源码合成事件深入解析
这篇文章主要为大家介绍了react源码合成事件深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
React Render Props共享代码技术
render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术。简单来说，给一个组件传入一个prop，这个props是一个函数，函数的作用是用来告诉这个组件需要渲染什么内容，那么这个prop就成为render prop
2023-01-01
react使用mobx封装管理用户登录的store示例详解
这篇文章主要介绍了react基于mobx封装管理用户登录的store,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
React中的JSX { }的使用详解
这篇文章主要介绍了React中的JSX{ }的使用,React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求，对React JSX使用感兴趣的朋友一起看看吧
2022-08-08
React实现登录表单的示例代码
这篇文章主要介绍了React实现登录表单的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
mobx在react hooks中的应用方式
这篇文章主要介绍了mobx在react hooks中的应用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
React并发更新与性能优化解析
这篇文章主要为大家介绍了React并发更新与性能优化解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
详解React中如何获取真实的dom
这篇文章主要为大家详细介绍了React中获取真实的dom的相关方法,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2025-02-02
antd踩坑之javascriptEnabled配置方式
这篇文章主要介绍了antd踩坑之javascriptEnabled配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01