在 React 中设置内联样式:
const App = () => {
const stylesObj = {
backgroundColor: 'lime',
color: 'white',
};
const elementWidth = 150;
return (
{/* ️ 直接设置内联样式 */}
迹忆客
{/* ️ 使用对象变量设置内联样式 */}
迹忆客
{/* ️ 使用三元有条件地设置内联样式 */}
迹忆客
{/* ️ 设置内联样式将变量插入字符串 */}
迹忆客
);
};
export default App;
代码示例展示了在 React.js 中的元素上设置内联样式的多种方法。
第一个示例直接在元素上设置样式。
迹忆客
请注意,在样式对象上设置时,像 background-color 这样的多词属性是驼峰式的。
style 属性的值包含在 2 组花括号中。
内联样式中的第一组花括号标记表达式的开始,第二组花括号是包含样式和值的对象。
第二个示例将样式对象提取到变量中。
const App = () => {
const stylesObj = {
backgroundColor: 'lime',
color: 'white',
};
return (
{/* ️ 使用对象变量设置内联样式 */}
迹忆客
);
};
export default App;
当我们有多个共享相同样式的元素时,您可以使用此方法。
我们还可以使用三元运算符有条件地在 React 中设置内联样式。
迹忆客
三元运算符与 if/else 语句非常相似。
问号之前的部分被评估,如果它返回一个真值,则运算符返回冒号之前的值,否则返回冒号之后的值。
示例中的三元运算符检查字符串 hi 的长度是否等于 2,如果是,则为 backgroundColor 属性返回字符串紫罗兰色,否则返回 mediumblue。
在设置内联样式时,我们还可以使用字符串插入表达式或变量。
const App = () => {
const elementWidth = 150;
return (
{/* ️ 设置内联样式将变量插入字符串 */}
迹忆客
);
};
export default App;
在设置样式时,我们使用模板文字来连接字符串和变量。
div 元素的 width 属性设置为 150px。
美元符号和花括号语法允许我们使用被评估的占位符。
React 中常用的模式是提取具有预定义样式的包装器组件,这些样式呈现其子属性。
function BoldText({children}) {
return {children};
}
const App = () => {
return (
Hello World
);
};
export default App;
这是一个非常简单的例子,但是 BoldText 组件在元素上设置了一些样式并渲染了它的 children 属性。
这种方法通常用于定义具有通常重用样式的包装器组件。
在 React 中编写内联样式的另一种方法是将样式写入扩展名为 .css 的文件中。
.bg-salmon {
background-color: salmon;
}
.text-white {
color: white;
}
.font-lg {
font-size: 2rem;
padding: 10px 10px;
}
下面是我们如何导入和使用这些类。
// ️ import css file
import './App.css';
const App = () => {
return (
hello world
);
};
export default App;
在 React 中导入全局 CSS 文件时,最好将 CSS 文件导入 index.js 文件。
index.js 文件是你的 React 应用程序的入口点,所以它总是会被运行。
另一方面,如果我们将 CSS 文件导入组件,则在卸载组件后,CSS 样式可能会被删除。
留言与评论(共有 0 条评论) “” |