在 React 中导入样式
我们将介绍如何在我们的 React 应用程序中导入样式和编写内联 CSS。
样式对于在你的网站或 Web 应用程序中创建强大的客户体验或最终用户来说非常宝贵。
保持颜色、字体、按钮、标题大小以及图像样式、大小和背景现代且一致，可以使用户体验和界面更好。
这些都是使网站或 Web 应用程序具有视觉吸引力的所有元素。
我们将通过导入样式表或在 React 中使用内联 CSS 来为我们的应用程序设置样式的 2 个示例。
在 React 中导入样式表以设置样式
首先，我们将创建一个新应用程序并通过导入样式表来设置它的样式。让我们使用以下命令创建一个新应用程序。
# react
npx create-react-app my-app
在 React 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。
# react
cd my-app
现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。
# react
npm start
在 App.js 中，我们将导入一个样式表。
# react
import "./styles.css";
作为回报，我们将创建一个模板。
# react
<div className="App">
<h1>Welcome Back</h1>
<p>Start editing to see some magic happen!</p>
<button>Save</button>
</div>
现在我们将添加 CSS 来为我们的模板设置样式。
# react
.App {
font-family: sans-serif;
text-align: center;
}
button{
padding: 5px 10px;
color: white;
background: black;
border: none;
}
输出：
我们可以按照这些简单的步骤轻松导入样式表并为我们的组件设置样式。
检查代码这里。
在 React 中使用内联 CSS 设置样式
让我们谈谈如何使用内联 CSS 为我们的组件设置样式。我们将通过一个示例来了解如何在 React 中使用内联 CSS。
因此，让我们使用以下命令创建一个新应用程序。
# react
npx create-react-app my-app
在 React 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。
# react
cd my-app
现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。
# react
npm start
我们需要安装一些库来帮助我们在应用程序中实现悬停效果。
我们将运行以下命令来安装 react-hook 以进行悬停。
# react
npm i @react-hook/hover
我们将运行以下命令来安装 dash-ui/styles。
# react
npm i @dash-ui/styles
一旦我们安装了我们的库，我们需要在 App.js 文件中导入 useHover 和 styles。
# react
import useHover from "@react-hook/hover";
import { styles } from "@dash-ui/styles";
现在，我们将在 export default function App() 中定义 Element 和 Hovered 元素。
我们将返回一个 div，一旦它被悬停并具有 Element 的 ref，它将更改其类名，如果有人悬停在它上面，它将输出悬停样式；如果没有人悬停在它上面，它将输出默认样式.
# react
export default function App() {
const Element = React.useRef(null);
const Hovered = useHover(Element);
return (
<div>
<h1 className={divStyle({ Hovered })} ref={Element}>Styling With Inline CSS</h1>
<button className={hoverStyle({ Hovered })} ref={Element}>Button Style</button>
</div>
);
}
现在，我们将为 Hovered 和 default 类定义我们的 CSS 样式。所以我们在 App.js 中的代码将如下所示。
# react
import React from "react";
import useHover from "@react-hook/hover";
import { styles } from "@dash-ui/styles";
export default function App() {
const Element = React.useRef(null);
const Hovered = useHover(Element);
return (
<div>
<h1 className={divStyle({ Hovered })} ref={Element}>Styling With Inline CSS</h1>
<button className={hoverStyle({ Hovered })} ref={Element}>Button Style</button>
</div>
);
}
const hoverStyle = styles({
default: `
background: black;
padding: 10px;
color: white;
border: none;
`,
Hovered: `
color: black;
background: white;
border: 1px solid black;
`
});
const divStyle = styles({
default: `
color: black;
`,
Hovered: `
color: blue;
`
});
输出：
检查代码这里。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn