在反应主题中使用样式

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