Свойство цвета пользовательского интерфейса Electron-React-Material
Только что установленный электрон реагирует с материалом ui. в моем компоненте панели приложений я использую свойство цвета, но при загрузке цвета он удаляет весь цвет и делает его белым. ive скопировал его из документации, поэтому не уверен, что мне не хватает, мой код ниже.
сначала импортировал цвет
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}>
Ответы 1
Я использую комбинацию пользовательского интерфейса Electron-React-Material, и цвет мне подходит.
Вы применяете '# F44336' к свойству цвета, и компонент AppBar ожидает одно из значений: 'наследовать' || "первичный" || «вторичный» || 'По умолчанию'. Вы можете узнать больше о документации для Material UI AppBar: https://material-ui.com/api/app-bar/, но вам нужна следующая информация:
Name: color
Type: enum: 'inherit' | 'primary' | 'secondary' | 'default'
Default: 'primary' - The color of the component.
Description - It supports those theme colors that make sense for this component.
Кроме того, поскольку вы применили неожиданное значение ('# F44336'), резервным цветом должен быть белый цвет по умолчанию, вы можете увидеть, как это выглядит в первом примере: https://material-ui.com/demos/app-bar/. И если вы посмотрите код во втором примере, вы увидите, как добавлять стили в UI-компонент материала (в данном случае AppBar) - с помощью «withStyles». Поэтому, если вам нужен другой цвет вашего AppBar, чем основной / дополнительный / цвета по умолчанию, определенные в вашей теме, вы всегда можете (принудительно) изменить его в стилях.
Я не знаю, насколько вы знакомы с пользовательским интерфейсом материала, но вы можете определить основной цвет для всего приложения в файле «MUITheme». Тогда вы сможете использовать его так:
<AppBar position='static' color='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', и он должен работать почти в каждом компоненте пользовательского интерфейса материала.
Надеюсь, это поможет! :)