I am trying to convert the const format into a React component in the following code. However, I have been unable to do so even after attempting to use state. The code is as follows:
const LoginPage = () => {
const styles = {
loginContainer: {
minWidth: 320,
maxWidth: 400,
height: 'auto',
position: 'absolute',
top: '20%',
left: 0,
right: 0,
margin: 'auto'
},
};
return (
<MuiThemeProvider muiTheme={ThemeDefault}>
<div>
<div style={styles.loginContainer}>
<h1>Testing</h1>
<Checkbox
label="Remember me"
style={styles.checkRemember.style}
labelStyle={styles.checkRemember.labelStyle}
iconStyle={styles.checkRemember.iconStyle}
/>
</div>
</div>
</MuiThemeProvider>
);
Due to some constraints and requirements for interactivity, I want to transform const LoginPage
into
class LoginPage extends React.Component
. However, when I try to incorporate styles, I encounter an error.
class LoginPage extends React.Component {
constructor(props) {
super(props);
if(authenticationService.currentUserValue) {
this.props.history.push('/');
}
}
>> const styles = {
loginContainer: {
minWidth: 320
}
}
render() {
return (
<MuiThemeProvider muiTheme={ThemeDefault}>
<div>
<div style={styles.loginContainer}>
<h1>Test</h1>
</div>
</div>
</MuiThemeProvider>
)
}
}
How can I effectively utilize these styles within my React.Component structure?