如何正确设置 React 组件的样式？

【问题标题】：How to style a react component correctly?如何正确设置 React 组件的样式？
【发布时间】：2017-06-23 02:46:21
【问题描述】：

我正在对一个普通的旧 css 文件使用 react。如果我有一个组件，我希望能够通过添加然后添加一个边距来设置它的位置。不过，这对我不起作用。现在我只能在组件周围放置一个然后为 div 设置样式。我想将 6 个相同的组件堆叠在一起，因此更改组件内部的样式将不起作用。我应该在这里做什么？

【问题讨论】：

您可以使用<MyComponent style={{margin: "2px", ...}}> 或<MyComponent className="..."> 设置任何组件的样式。
你看过documentation吗？
当我设置样式什么都没有发生
@PurplePanda 在您的示例中 <MyComponent style = {{margin: "200px}} /> ^ 您在 px 之后缺少引号

标签： reactjs

【解决方案1】：

如果您要添加作为属性传递的类名，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        return (
            <div>
                <MyComponent className="some-class" />
                <MyComponent className="another-class" />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root');

然后，您可以在MyComponent 中将该类名添加到div，如下所示：

import React from 'react';

export class MyComponent extends React.Component {
    render() {
        return (
            <div className={ this.props.className }></div>
        );
    }
}

【讨论】：

很高兴为您提供帮助。 style 属性也是如此。