How to use the next/css.style function in next

<span>Passo 2.</span>
                <span>Use esse código ("{this.state.code}") como nome da página</span>
              

              <li>
                <span>Passo 3.</span>
                <span>Clique em confirmar invocador abaixo</span>
              </li>
            
          

          <div>
            <p>{this.state.code}</p>

            
              <span>Copiar código</span>
            
          </div>

          <button>Anterior</button>
          <button disabled="{this.state.requesting}">Confirmar Invocador</button>
        
      
    )
  }
}

const Featured = props => {
  const flag = getTier('bronze').flag.small

  return (
    <div>
      <div>
        <figure>
          <span>
            <img alt="" src="{flag}">
          </span>

          <img alt="" src="https://s3.amazonaws.com/uifaces/faces/twitter/peterme/128.jpg">
        </figure>

        <h2>Sue Dixon</h2>
        <h3>nicoleaniston</h3>

        <ul>
          <li>
            <span>1th</span>
            <h3>Ranking</h3>
          </li>

          <li>
            <span>8/15</span>
            <h3>Win/Loss</h3>
          </li>

          <li>
            <span>580</span>
            <h3>Elo</h3>
          </li></ul></div></div>

}

    return (
       this.slider = c } {...settings}>
        <div>
          <img alt="" src="static/placeholder.svg">

          <h1>Bem vindo ao Ritoplz</h1>
          <h2>Vamos ajudar você a configurar sua conta</h2>

          <button>Próximo</button>
        </div>

        <div>
          <h1>Escolha sua localização</h1>
          <h2>Essa será sua localização no Rankings</h2>

          <div>
            <fieldset>
              <label>País</label>
              <select value="{this.state.country}">
            

            
              Estado
              </select>
            </fieldset>

            <fieldset>
              <label>Cidade</label>
              <select value="{this.state.city}">
            </select></fieldset></div></div>

<fieldset>
          <label>Seu nome</label>
          <input type="text"> this.name = input}/&gt;
        </fieldset>

        <fieldset>
          <label>E-mail</label>
          <input type="email"> this.email = input}/&gt;
        </fieldset>

        <fieldset>
          <label>Senha</label>
          <input type="password"> this.password = input}/&gt;
        </fieldset>

        <button disabled="{this.state.requesting}" type="submit">Cadastrar</button>

        
      
    )
  }
}

<button>Anterior</button>
          <button disabled="{this.state.requesting}">Próximo</button>
        

        <div>
          <div>
            <h1>Vamos adicionar seu invocador</h1>
            <h2>Nome do seu invocador</h2>

            <div>
              <fieldset>
                <label>Nome do Invocador</label>
                <input type="text"> this.summoner = node}/&gt;
              </fieldset>
            </div>
          </div>

          <button>Anterior</button>
          <button disabled="{this.state.requesting}">Próximo</button>
        </div>

        <div>
          <h1>Confirme seu invocador</h1>
          <h2>Siga as instruções abaixo para confirmar seu invocador</h2>

          <div>
            <div>
              <img alt="" src="static/mastery-lol.png">
            </div></div></div>

import React from 'react';
import {style} from 'next/css';

const styles = {
  footer: style({
    marginTop: 'auto',
    marginBottom: '40px',
    paddingTop: '40px',
    display: 'flex',
    justifyContent: 'space-between',
    color: '#666',
    fontSize: '11px'
  })
};

export default () => (
  <footer>
    <span>
      built by <a href="https://github.com/amccloud">@amccloud</a>
      {' '}&amp;{' '}
      <a href="https://github.com/zpnk">@zpnk</a></span></footer>

<h1>Escolha sua localização</h1>
          <h2>Essa será sua localização no Rankings</h2>

          <div>
            <fieldset>
              <label>País</label>
              <select value="{this.state.country}">
            

            
              Estado
              </select>
            </fieldset>

            <fieldset>
              <label>Cidade</label>
              <select value="{this.state.city}">
            
          

          Anterior
          Próximo
        

        
          
            Vamos adicionar seu invocador
            Nome do seu invocador

            
              
                Nome do Invocador</select></fieldset></div>

#__next {
    height: 100vh;
  }

  main {
    max-width: 800px;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0 15px;
  }
`);

const styles = {
  h1: style({
    fontSize: '13px',
    fontWeight: 700
  })
};

const Header = ({title}) => (
  <header>
    
      <title>{title}</title>
      
      
      
      
    
    <h1># DEPLOY.NOW</h1>
  </header>

} else {
        list = (
          <ul>
            {this.state.unrankeds.map(summoner =&gt; {
              return 
            })}
          </ul>
        )
      }

      rankingList = (
        <div>
          </div>
      )
    } else {
      rankingList = 
    }

    return (
      <div>
        <h2>Rankings</h2>
        {rankingList}
      </div>
    )

render() {
    let profile = null
    let summoners = null

    if (this.props.profile.requested) {
      const location = this.props.profile.data.user.country ? `${this.props.profile.data.user.city}, ${this.props.profile.data.user.state} ${this.props.profile.data.user.country}` : 'Add Location'
      profile = 

      if (this.props.profile.data.summoners.length > 0) {
        summoners = 
      } else {
        summoners = 
      }
    } else {
      profile = (<h1>Loading...</h1>)
    }
    
    return (
      <div>
        {profile}
        {summoners}
      </div>
    )
  }
}