如何为 React 组件设置默认样式

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

介绍 React提供了多种方法来设置组件的样式。在某些情况下，您可能希望向外部组件添加其他样式，或者为组件内的JSX元素分配最少的样式。使用基于组件的样式方法而不是传统的基于类的CSS样

介绍

React 提供了多种方法来设置组件的样式。在某些情况下，您可能希望向外部组件添加其他样式，或者为组件内的 JSX 元素分配最少的样式。使用基于组件的样式方法而不是传统的基于类的 CSS 样式变得很重要。

在本指南中，您将学习如何为 React 组件设置默认样式。

JS 中的 CSS

考虑一个简单的 React 组件，它用蓝色的文本呈现h1 。

      <h1 style={{color:'blue'}}>Inline styling in React</h1>
    

React 中的 JSX 元素本身就是必不可少组件，默认情况下可以访问 style prop。如上所示，这用于内联样式。两对花括号是语法的一部分，表示必须为 style prop 分配一个包含键值对的对象。因此，style prop 可以从其父组件传递给任何组件。按照这种方法，可以通过传递一个包含 CSS 属性及其值作为对象内部的键值对的对象，将相同的样式设置为默认样式。

在组件顶部的h1中名为headlineStyle的对象内声明与上面相同的样式。

      const headingStyle={
  color:'blue'
}
    

注意：在 JSX 中，用连字符 ( - ) 分隔的 CSS 属性采用驼峰式命名法。

将此对象传递到 style prop 中。

      <h1 style={headingStyle}>CSS in JSX React</h1>
    

这是在 React 中设置默认样式的一般方法。由于对象本身被分配给 style 属性，因此双花括号减少为单个。使用内联样式方法对 React 组件进行样式设计的概念也称为JS 中的 CSS，因为您直接在 JSX 模板中使用 CSS 属性。

为 React 组件设置默认样式

创建一个简单的 React 组件，渲染一个空的div。

      const MyDivComponent=()=>{
  return(
    <>
    <div/>
    </>
  )
}
    

现在创建一个样式对象divStyles，其中包含一些 CSS 规则来设置div 的样式。

      const divStyles={
  backgroundColor: 'teal',
  padding: 10,
  marginLeft: 100,
  height: 400,
  width:400
}
    

divStyles包含简单的 CSS 规则，为div提供青色背景颜色以及 400x400px 尺寸、左边距 100px 和填充 10px。

将其作为 props 传递给MyDivComponent并将其呈现在 DOM 上。

      function App() {
  return (
    <>
    <MyDivComponent style={divStyles}/>
    </>
  );
}
    

这将使用divStyles中所需的样式渲染一个div。同样，所有 CSS 规则都可以组合成一个 JavaScript 对象，然后作为 props 传递给所需的组件。

一个样式对象可用于设置不同组件的样式，或者更确切地说是组件内的不同 JSX 元素的样式。它充当该组件的 CSS 样式表，使用默认样式 prop，可以将该对象的一些 CSS 属性分配给这些元素。这与组件的样式表使用类定位不同 JSX 元素的方式非常相似。

向divStyles对象添加更多属性。

      const divStyles={
  backgroundColor: 'teal',
  color:'white',
  padding: 10,
  marginLeft: 100,
  height: 400,
  width:400
}
    

现在将该对象的单独样式作为内联样式分配给 JSX 元素。

      const MyDivComponent=({style})=>{
  console.log(style);
  return(
    <>
    <div style={{'backgroundColor':style.backgroundColor}}>
      <h2 style={{'color':style.color}}>Default styles in a React component</h2>
    </div>
    </>
  )
}
    

现在，该组件使用h2进行渲染，其背景颜色为青色，文本颜色为白色。

您还可以创建单独的样式对象并将其设置为其他组件的默认样式，类似于全局样式表。创建以下样式对象作为可导出对象。

      export const headerStyles={
  textTransform: 'Uppercase',
  fontSize: 32,
  fontWeight:'bold',
  color:'magenta'
}
    

现在headerStyles可以在任何组件中使用。创建一个单独的组件，使用这些样式呈现一个简单的标题。

      import React from 'react';
import {headerStyles} from './App'
const Header=()=>{
    return(
            <> <h1 style={headerStyles}>This is header component</h1> </>
    )

}

export default Header;
    

在你的根组件内渲染该组件。

      function App() {
  return (
    <>
    <Header/>
    </>
  );
}
    

这样，您可以创建任意数量的样式对象，并将它们作为道具传递给组件或全局导出它们，以便任何组件都可以使用它们。

JS 中 CSS 的优缺点

让我们看看这种方法的优点和缺点，以便您了解何时何地为 React 组件使用默认样式。

优点

样式以声明的方式描述，并且易于阅读和维护。
CSS 样式发生冲突的可能性较小，也不需要手动覆盖。
它可以在组件内部使用，在某些情况下，也可以在父组件外部使用。
它使用 Nodejs 在运行时进行编译，提供高性能。
它消除了 CSS 样式表和大型复杂 CSS 模块的使用。

缺点

在 JS 中使用 CSS 的概念相当新，尚未被开发者社区完全接受。因此，其他使用您代码的开发人员可能会发现很难更改或修改这些样式。
其在文档层面提供的模块化程度较低。
它主要需要编译依赖项，例如jss、jss-preset-default或jss-cli。
为了实现更加定制的控制，您可能必须使用学习曲线更陡峭的库。

结论

尽管 JS 中的 CSS 尚未被广泛接受，但使用 React 组件的默认样式有时可以帮助您避免混乱的情况。当您只需要设置几个 JSX 元素的样式或必须创建具有固定样式的可重用组件时，它也很方便。但是，由于内联样式的众所周知的缺点，React 应用应仅将此方法与传统的基于类的样式方法结合使用，以设置组件样式，从而避免不一致和混乱。

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

_查看原文

技术指南

React框架

阅读全文

如何为 React 组件设置默认样式

杭州电子商务研究院

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

const MyDivComponent=({style})=>{ console.log(style); return( <> <div style={{'backgroundColor':style.backgroundColor}}> <h2 style={{'color':style.color}}>Default styles in a React component</h2> </div> </> ) }

import React from 'react'; import {headerStyles} from './App' const Header=()=>{ return( <> <h1 style={headerStyles}>This is header component</h1> </> ) } export default Header;