Использование стилей в теме реагирования

Question

Мне нужно преобразовать из const в формат компонента React в следующем коде.Но я не мог этого сделать, даже я должен был попробовать государство.Ниже приведен фактический код.

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>
);

Но так как у меня есть некоторая конструкция и интерактивность, я хочу преобразовать из const LoginPage в class LoginPage extends React.Component, но когда я использую стили, это дает мне ошибку.

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>
     )
}
}

Итак, как я могу использовать эти стили в моей структуре React.Component.

Answer 1

Используйте стили вне класса

class LoginPage extends React.Component {

    constructor(props) {
      super(props);

      if(authenticationService.currentUserValue) {
        this.props.history.push('/');
      }

    }

render() {
    return (
      <MuiThemeProvider muiTheme={ThemeDefault}>
        <div>
          <div style={styles.loginContainer}>
          <h1>Test</h1>
          </div>
        </div>
      </MuiThemeProvider>
     )
}
}

const styles = {
      loginContainer: {
        minWidth: 320
}
}