Question

刚安装电子与材料ui反应。在我的app-bar组件上我使用了color属性，但是在加载颜色时它会删除所有颜色并使其变白。我已经从文档中复制了它，所以不确定我缺少什么，我的代码在下面。

首先导入颜色

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import red from '@material-ui/core/colors/red';
import red from '@material-ui/core/colors/red';

设置const值

const primary = red[500]; // #F44336

将其应用于AppBar组件

<AppBar position="static" color={primary}>

Answer 1

我正在使用Electron-React-Material UI组合，着色对我来说很好。

您正在申请＃F44336＆＃39;颜色属性和AppBar组件期望其中一个值：＆＃39;继承＆＃39; || ＆＃39;主＆＃39; || ＆＃39;次级＆＃39; || ＆＃39;默认＆＃39 ;.您可以查看有关Material UI AppBar的文档的更多信息：https://material-ui.com/api/app-bar/，但您需要的信息是：

名称：颜色

类型：枚举：＆＃39;继承＆＃39; | ＆＃39;主＆＃39; | ＆＃39;次级＆＃39; | ＆＃39;默认＆＃39;

默认：＆＃39;主要＆＃39; - 组件的颜色。

描述 - 它支持那些对此组件有意义的主题颜色。

此外，由于您应用了意外值（＆＃39;＃F44336＆＃39;），因此颜色后备应为＆＃34;默认值为＆＃34;这是白色的，您可以在第一个示例中看到它的外观：https://material-ui.com/demos/app-bar/。如果您在第二个示例中查看代码，您可以看到如何将样式附加到Material UI Component（在本例中为AppBar） - 使用＆＃34; withStyles＆＃34;。因此，如果您需要AppBar的不同颜色，然后在主题中定义主要/次要/默认颜色，您可以随时（强制）更改样式。

我不知道您对Material UI有多熟悉，但您可以在＆＃34; MUITheme＆＃34;中定义整个应用程序的主要颜色。文件。然后你就可以像这样使用它：

<AppBar position='static' color='primary'>

（请注意，我正在应用字符串，而不是变量主要:)）。

这里有一个你可能会考虑的例子：

用MuiThemeProvider和自定义主题包装的App.js文件：

App.js

import MainTheme from './MainTheme';
.
.
.
class App extends Component {
  render () {
    return (
      <MuiThemeProvider theme={MainTheme}>
        <AppBar position='static' color='primary' />
      </MuiThemeProvider>
    )
  }
}

定义了主要，次要和错误颜色的自定义主题文件：

MainTheme.js

import { createMuiTheme } from 'material-ui/styles';
import { teal, blueGrey, red } from 'material-ui/colors';

const MainTheme = createMuiTheme({
  palette: {
    primary: teal,
    secondary: blueGrey,
    error: { main: red[ 500 ] },
  },
});

export default MainTheme;

定义主要颜色后，您可以将其与color =＆＃39; primary＆＃39;一起使用，它应该适用于几乎所有材质UI组件。

我希望这有帮助！：）

电子反应材料UI颜色属性

1 个答案: