使用 React 进行内联样式

2020-07-31 08:00:00 · 飞浪

介绍在很少需要使用单页应用的前端项目中，DOM元素的内联样式通常放置在目标元素的style="property:value"属性中。但在React中，内联样式的情况则大不相同。本指南重

介绍

在很少需要使用单页应用的前端项目中，DOM 元素的内联样式通常放置在目标元素的style="property:value"属性中。但在 React 中，内联样式的情况则大不相同。本指南重点介绍如何使用构建用户个人资料卡组件的真实示例来实现这一点。

让我们开始吧！

React 中的样式组件

您可能已经知道使用className属性与外部样式表结合来设置 React 组件样式的常规方法，如下所示：

      import React from "react"
import './style.css'

function myComponent(){
      return(

           return <p className="paragraph-text">ClassName Styled Text</p>
     )
}
    

      .paragraph-text{
   font-weight: bold;
   color: beige;
}
    

内联样式

使用内联样式实现相同结果的方法完全不同。要在 React 中使用内联样式，请使用 style 属性，该属性接受具有 camelCased 属性的 Javascript 对象。示例：

      function MyComponent(){

return <div style={{ color: 'blue', lineHeight : 10, padding: 20 }}> Inline Styled Component</div>

}

请注意，padding 的值没有单位，因为 React 会在某些数字内联样式属性后附加“px”后缀。如果您需要使用其他单位（例如“em”或“rem”），请将值明确指定为字符串。将其应用于 padding 属性应导致padding: '1.5em'。此外，这些样式不会自动添加供应商前缀，因此您必须手动添加供应商前缀。

提高可读性

如果样式太多，一切都变得笨重，MyComponent的可读性就会大大降低。由于样式只是对象，因此可以将它们从组件中提取出来，如下所示。

      const myComponentStyle = {
   color: 'blue',
   lineHeight: 10,
   padding: '1.5em',
}

function MyComponent(){

     return <div style={myComponentStyle}> Inline Styled Component</div>

}
    

构建卡片组件

说得够多了！让我们构建用户卡组件。

      const cardStyles = {
  container: {
    display: "flex",
    height: 100,
    width: 400,
    boxShadow: "0 0 3px 2px #cec7c759",
    alignItems: "center",
    padding: 20,
    borderRadius: 20,
  },
  profilePicture: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "orange",
    color: "white",
    height: 20,
    width: 20,
    borderRadius: "50%",
    padding: 10,
    fontWeight: "bold",
  },
  bio: {
    marginLeft: 10,
  },
  userName: {
    fontWeight: "bold",
  },
};

function userCardComponent(){

         <div style={cardStyles.container}>
        <span style={cardStyles.profilePicture}>D</span>
        <div style={cardStyles.bio}>
          <p style={cardStyles.userName}>Desmond Nyamador</p>
          <p>I just learned an easy way to style React Components</p>
        </div>
      </div>

}
    

经验法则

React 官方文档不赞成使用内联样式作为项目样式的主要手段，而建议使用className属性。

注意：文档中的某些示例为了方便使用 style ，但通常不建议使用style属性作为设置元素样式的主要方式。在大多数情况下， className 应用于引用外部 CSS 样式表中定义的类。style 最常用于 React 应用，用于在渲染时添加动态计算的样式。

结论

好了，就到此为止！在本指南中，我们向您介绍了 React 中的内联样式概念。如果您想了解更多信息，可以访问 React 文档以了解更多详细信息：React Styling。

您也可以在 Twitter 上联系我：Desmond Nyamador。

了解更多

查看 Pluralsight 的这些 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

使用 React 进行内联样式

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

const cardStyles = { container: { display: "flex", height: 100, width: 400, boxShadow: "0 0 3px 2px #cec7c759", alignItems: "center", padding: 20, borderRadius: 20, }, profilePicture: { display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: "orange", color: "white", height: 20, width: 20, borderRadius: "50%", padding: 10, fontWeight: "bold", }, bio: { marginLeft: 10, }, userName: { fontWeight: "bold", }, }; function userCardComponent(){ <div style={cardStyles.container}> <span style={cardStyles.profilePicture}>D</span> <div style={cardStyles.bio}> <p style={cardStyles.userName}>Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> </div> </div> }