CODEWITHSUNDEEP
cssreactjscomponents
Kamal Panhwar
Kamal Panhwar

Reputation: 2399

Using styles in react theme

I am need to convert from const to React component format in following code. But I could not do it, even I have to tried state. Following is actual code.

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

But as I have some construction and interactity so I want to convert from const LoginPage to class LoginPage extends React.Component but when I using styles it give me erro.

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

So how can I use these styles in my React.Component structure.

Upvotes: 0

Views: 55

Answers (1)

Hari
Hari

Reputation: 136

Use the styles outside of the class 

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

Upvotes: 1

Related Questions