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语句包装了所有Routes。无论我对此设置什么填充，它都适用于我的所有组件。我只希望一个组件具有单独的填充。

Answer 1

您可以尝试以下方法：

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

Answer 2

条件样式

如果您希望某个组件根据路由具有其他样式（例如，仅在根路由"/"处），则可以从组件内部检查当前路由并相应地更改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>

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

2 个答案: