在 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