如何从 Component 容器中设置 React 组件的样式？

Question

我有一个要从 App.jsx 路由到的组件。我希望这个特定组件的所有边的填充为 10%。对于其他组件，我希望填充为零。我已经尝试从组件内部进行样式设置，但它只会在侧面添加空格。我希望它的两侧是灰色的，就像页脚一样。

我尝试为我的 App.jsx 中的元素创建一个 className，然后编辑 css 样式表，但它没有改变任何东西。

在 App.jsx 中： <Route exact path="/" component={Home} className={styles.home} />

在 CSS 样式表中： .home { padding: 10%; }

在 Home 组件中，内边距设置为零，高度设置为 100vh。

我有一个内容 div，它用我的所有路由包装 Switch 语句。无论我将填充设置为什么，它都适用于我的所有组件。我只希望一个组件有单独的填充。

Answer 1

条件样式

如果您希望某个组件根据路由具有其他样式（例如，仅在根路由"/"），您可以从组件内部检查当前路由并相应地更改 CSS 样式。你可以通过将你的组件包装在来自 React Router 的高阶组件 withRouter 中来获得 location 属性。

例如：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends Component {
    getClassName() {
        const { location } = this.props;

        if (location.pathname === "/") {
            return "home";
        } else {
            return "";
        }
    }

    render() {
        const className = this.getClassName();

        return (
            <div className={ className }>
                { /* whatever goes in here */ }
            </div>
        )
    }
}

export default withRouter(MyComponent);

灰色填充

您还提到您希望填充为灰色。填充不能着色，但您可以将组件的渲染内容包装在另一个具有灰色背景色的 HTML 元素中。然后在最大的元素上放置填充。

例子：

.container {
  background-color: gray;
  padding: 2rem;
}

.content {
  background-color: white;
  padding: .5rem;
}

<div class="container">
  <div class="content">
    <strong>Content</strong>
    
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Answer 2

你可以试试这个：

<Route exact path="/">
  <Home className={styles.home}/>
</Route>