使用Constant组件在React JS中设计主要组件的样式

Question

我到处都是，尝试了所有我能想到的搜索，但似乎找不到。我需要在react中创建一个Constant组件，其中包含一堆常量样式。它们必须是例如color，backgroundColor和padding。

我似乎无法通过仅在此处和示例中添加一个常量来使其起作用

export const EXPANSION_PANEL_BACKGROUND_COLOR = {backgroundColor:#DFDEDE};

然后将其导入到我的主要组件中

import EXPANSION_PANEL_BACKGROUND_COLOR from './constants.jsx'

我使用它的方式就像

<ExpansionPanel style={{ EXPANSION_PANEL_BACKGROUND_COLOR }}

当我加载本地主机时，它不会显示所需的颜色。关于我能做什么的任何想法？

Answer 1

{{ EXPANSION_PANEL_BACKGROUND_COLOR }}变成{{ EXPANSION_PANEL_BACKGROUND_COLOR: EXPANSION_PANEL_BACKGROUND_COLOR }}。您只想使用该对象，而不要将其用作EXPANSION_PANEL_BACKGROUND_COLOR键的值：

<ExpansionPanel style={EXPANSION_PANEL_BACKGROUND_COLOR} />

Answer 2

这是因为您的书写方式意味着：

<ExpansionPanel style={{ EXPANSION_PANEL_BACKGROUND_COLOR:  EXPANSION_PANEL_BACKGROUND_COLOR}}

样式需要一个对象，EXPANSION_PANEL_BACKGROUND_COLOR是一个对象，因此您需要这样写：

<ExpansionPanel style={ EXPANSION_PANEL_BACKGROUND_COLOR }  // no {{ only single {

考虑以下简单示例：

const EXPANSION_PANEL_BACKGROUND_COLOR = {backgroundColor:#DFDEDE};

<ExpansionPanel style={ EXPANSION_PANEL_BACKGROUND_COLOR }