資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會研究
時裝研究
法律研究如何在 ReactJS 中使用 Radium？
在本文中，我們將瞭解如何在 React 應用程式中的元件應用內聯樣式。
Radium 是用於為 JSX 元素新增內聯樣式和偽選擇器（例如 **:hover、:focus、:active** 等）的流行的第三方包應用程式。
安裝模組
npm install --save radium
或
yarn add radium
Npm 是管理我們 React 包的節點包管理器，而 yarn 是更安全、更快速、更輕量級的包管理器。
示例
App.jsx
import Radium from 'radium';
import React from 'react';
function App() {
const style = {
':hover': {
backgroundColor: '#000',
color: '#fff',
},
};
return (
<div>
<h3>TutorialsPoint</h3>
<button style={style}>Hover Me</button>
</div>
);
}
export default Radium(App);我們還可以向元件新增其他偽選擇器和自定義 CSS 樣式。
輸出
這將產生以下結果。
更新於： 2021-03-18
749 次瀏覽
廣告