Свойства цвета пользовательского интерфейса Electron-React-Material - PullRequest
Новая
       6

Свойства цвета пользовательского интерфейса Electron-React-Material

0 голосов
/ 01 июня 2018

Только что установленный электрон реагирует с материальным интерфейсом.на моем компоненте панели приложения я использую свойство 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 primary = red[500]; // #F44336

применил его к компоненту AppBar 

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

1 Ответ

0 голосов
/ 01 июня 2018

Я использую комбинированный пользовательский интерфейс Electron-React-Material, и раскраска у меня отлично работает.

Вы применяете '# F44336' к свойству цвета, и компонент AppBar ожидает одно из значений: 'наследовать' ||«первичный» ||«вторичный» ||'дефолт'.Вы можете ознакомиться с дополнительной документацией по интерфейсу приложения Material UI: https://material -ui.com / api / app-bar / , но необходимая информация:

Имя: color

Тип: enum: 'наследовать' |«основной» |«вторичный» |'default'

По умолчанию: 'primary' - цвет компонента.

Описание - поддерживает те цвета темы, которые имеют смысл для этого компонента.

Кроме того, поскольку вы применили неожиданное значение ('# F44336'), запасной цвет должен быть «по умолчанию», который является белым, вы можете увидеть, как это выглядит в первом примере: https://material -ui.com / demos /приложение-бар / .А если вы посмотрите код во втором примере, вы увидите, как добавлять стили к компоненту пользовательского интерфейса материала (в данном случае AppBar) - с помощью withStyles.Поэтому, если вам нужен другой цвет вашей панели приложений, чем основной / дополнительный / стандартные цвета, определенные в вашей теме, вы всегда можете (принудительно) изменить его в стилях.

Я не знаю, насколько вы знакомы сПользовательский интерфейс материала, но вы можете определить основной цвет для всего приложения в файле "MUITheme".Тогда вы сможете использовать его следующим образом: 

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

(обратите внимание, что я применяю строку, а не переменную primary :)).

Также вот пример, который вы могли бы счесть удобным:

Файл App.js, обернутый MuiThemeProvider и пользовательской темой: 

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 = 'primary', и он должен работать почти во всех компонентах пользовательского интерфейса материала.

Надеюсь, это поможет!:)

...