将样式应用于React组件有三种方法。

外部样式表

在此方法中，你可以将外部样式表导入到组件使用类中。 但是你应该使用className而不是class来为React元素应用样式, 这里有一个例子。

复制
1import React from 'react';
2import './App.css';
3import { Header } from './header/header';
4import { Footer } from './footer/footer';
5import { Dashboard } from './dashboard/dashboard';
6import { UserDisplay } from './userdisplay';
7
8function App() {
9  return (
10    <div className="App">
11      <Header />
12      <Dashboard />
13      <UserDisplay />
14      <Footer />
15    </div>
16  );
17}
18
19export default App;

内联样式

在这个方法中，我们可以直接将 props 传递给HTML元素，属性为style。这里有一个例子。这里需要注意的重要一点是，我们将javascript对象传递给style，这就是为什么我们使用 backgroundColor 而不是CSS方法backbackground-color。

复制
1import React from 'react';
2
3export const Header = () => {
4
5    const heading = 'TODO App'
6
7    return(
8        <div style={{backgroundColor:'orange'}}>
9            <h1>{heading}</h1>
10        </div>
11    )
12}

定义样式对象并使用它

因为我们将javascript对象传递给style属性，所以我们可以在组件中定义一个style对象并使用它。下面是一个示例，你也可以将此对象作为 props 传递到组件树中。

复制
1import React from 'react';
2
3const footerStyle = {
4    width: '100%',
5    backgroundColor: 'green',
6    padding: '50px',
7    font: '30px',
8    color: 'white',
9    fontWeight: 'bold'
10}
11
12export const Footer = () => {
13    return(
14        <div style={footerStyle}>
15            All Rights Reserved 2019
16        </div>
17    )
18}