Автор оригинала: DhananjayKumar.
Реагистрационные компоненты, которые вы можете повторно использовать, отлично, но это сложно изменить их стиль, чтобы адаптироваться к новой теме. Я использовал как компонент Bootstrap и Material Ui, и было трудно применить тему для них обоих. Медленно погибший из-за использования большего количества компонентов Material UI, так как он имеет хорошую поддержку и документацию для тематической тематической компоненты. Вы можете найти документацию по тематической метеру материала здесь Отказ Правило большого пальца о тематике – не позволяйте каждому свойством стиля нашего компонента изменить темой, иначе мы потеряем какую-либо согласованность по всему проектам. Вещи, которые мы должны измениться, – это границ, фоновый цвет и т. Д.
Есть хорошая статья о Тематические компоненты реагирования который я добавил в закладки и может быть полезен для вас, чтобы понять концепцию за сценой.
Кодовый фрагмент
Кодовый фрагмент, который необходим для применения темы во время выполнения. Добавить app-theme.js к корню SRC папка и ниже код –
import { createMuiTheme } from '@material-ui/core/styles';
const defaultTheme = createMuiTheme({
overrides: {
MuiOutlinedInput: {
root: {
backgroundColor: 'white',
'&$focused $notchedOutline': {
borderColor: '#8ca103',
borderWidth: 1,
},
}
},
MuiFormLabel: {
root: {
color: '#8ca103',
"&$focused": {
color: '#8ca103',
}
},
}
},
typography: { useNextVariants: true},
textColor: '#8ca103',
buttonBackground: '#8ca103',
appBarBackground: 'linear-gradient(#d0d0b7, #d0d0b7)',
appNameTextShadow: '1px 1px 2px greenyellow, 0 0 10px black, 0 0 2px greenyellow',
drawerBackground: 'linear-gradient( #ffffff, #f5f5f2)',
contentHeader: {
fontWeight: "bold",
color: "black",
fontSize: "16px",
textTransform: "capitalize",
padding: "8px",
border: "1px solid lightgrey",
backgroundColor: "#ebeadf"
},
contentArea : {
padding: "16px",
borderStyle: "solid",
borderWidth: "1px",
borderColor: "#d0d0b7",
},
blockBackground: "#f5f5f2"
});
const blueTheme = createMuiTheme({
overrides: {
MuiOutlinedInput: {
root: {
backgroundColor: 'white',
'&$focused $notchedOutline': {
borderColor: '#0f04d9',
borderWidth: 1,
},
}
},
MuiFormLabel: {
root: {
color: '#0f04d9',
"&$focused": {
color: '#0f04d9',
}
},
}
},
typography: { useNextVariants: true},
textColor: '#0f04d9',
buttonBackground: '#0f04d9',
appBarBackground: 'linear-gradient(#9e9eff, #9e9eff)',
appNameTextShadow: '1px 1px 1px orange, 0 0 10px white, 0 0 1px orange',
drawerBackground: 'linear-gradient( #ffffff, #dddcf5)',
contentHeader: {
fontWeight: "bold",
color: "black",
fontSize: "16px",
textTransform: "capitalize",
padding: "8px",
marginBottom: "8px",
backgroundColor: "#f5f5ff"
},
contentArea : {
padding: "25px",
borderStyle: "solid",
borderWidth: "1px",
borderColor: "#b5bbf5",
},
blockBackground: "#f5f5ff"
});
export const themeOptions = [
{ value: defaultTheme, label: 'default-theme' },
{ value: blueTheme, label: 'blue-theme' }
];
Вы создали темы, которые вам нужно передать MuithemeProvider на основе выбора. Добавьте ниже код в App.js –
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import PropTypes from 'prop-types';
import CssBaseline from '@material-ui/core/CssBaseline';
import withStyles from '@material-ui/core/styles/withStyles';
import { MuiThemeProvider } from '@material-ui/core/styles';
import SignIn from "./Components/signIn";
import {themeOptions} from './app-theme';
class App extends Component {
constructor(props) {
super(props);
this.state = {
themeOptions: themeOptions,
selectedTheme: ctx !== null && ctx.themeName !== undefined
? themeOptions.filter(o=> o.label === ctx.themeName)[0]
: themeOptions[0],
};
}
handleThemeChange = (e) => {
this.setState({ selectedTheme: e});
}
render() {
const { classes } = this.props;
return this.renderUnAuthenticatedView(classes);
}
renderUnAuthenticatedView(classes) {
let theme = this.state.selectedTheme.value;
return (
Bookindesk
);
}
}
App.propTypes = {
classes: PropTypes.object.isRequired,
};
const styles = theme => ({
appHeader: {
display: "grid",
gridGap: "10px",
gridTemplateColumns: 'repeat(2, 1fr)',
height: "90px"
},
appName: {
textAlign: "right",
gridColumn: '1/2',
paddingTop:"15px",
},
themeName: {
gridColumn: '2/3',
paddingTop:"25px",
fontSize: "16px",
width:"170px",
},
});
export default withStyles(styles)(App);
Теперь выбранная тема доступна всем компонентам, завернутым внутри MuithemeProvider Отказ В этом примере мы хотим сделать этот тематический объект доступным для подписания компонента. Вот идет Signin.js код –
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Avatar, Button, TextField, Checkbox} from '@material-ui/core';
import {LockOutlined} from '@material-ui/icons';
import {withStyles} from '@material-ui/core/styles';
class SignIn extends Component {
constructor(props) {
super(props);
this.state = {
signEmail: "",
signPassword: "",
signHotelName: "",
rememberMe: true,
};
}
render() {
const { theme, classes } = this.props;
return (
Already Registered?
SIGN IN
);
}
}
SignIn.propTypes = {
classes: PropTypes.object.isRequired,
};
const styles = theme => ({
main: {
padding: theme.spacing.unit * 3,
},
root: {
'& .MuiTextField-root': {
width: '100%', // Fix IE 11 issue.
},
},
paper: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: theme.spacing.unit * 2,
borderStyle: "solid",
borderWidth: "1px",
borderColor: theme.contentArea.borderColor,
},
avatar: {
backgroundColor: theme.textColor,
margin: "16px"
},
rememberMe: {
marginTop: "16px",
},
forgot: {
color: theme.textColor,
marginTop: "4px",
},
section: {
fontSize: '12px',
fontWeight: 'bold',
marginTop: '12px',
color: theme.textColor,
},
textField: {
width: '100%',
},
signIn: {
marginTop: "46px",
marginBottom: "56px",
padding: "10px",
fontWeight:"bold",
[theme.breakpoints.down('sm')]: {
marginTop: "16px",
marginBottom: "16px",
},
}
});
export default withStyles(styles, { withTheme: true })(SignIn);
Вы можете видеть, что я использую Тема.contentarea.bordercolor , Тема. TextColor К классам CSS и напрямую чтение тематического объекта Theme.ContenteDer В рендерифицированном методе Signin Составная часть.