Transform button into text after condition is true-CodePudding

I'm using the AppBar component of material-ui library, I added a button, I'd say it's hardcoded in the AppBar, I'm trying to transform this button to just a text in the AppBar, but I got nothing.

How can I transform the button in the AppBar to just text?

App.js:

const connectWalletChecker = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='contained' text='Connect Wallet' handle={connectWalletPressed}/>
      </div>
    )
  }

const AlreadyConnected = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='contained' text={walletAddress} handle={null}/>
      </div>
    )
  }

  return(
    <div>
      {walletAddress ? AlreadyConnected() : connectWalletChecker()}
      
    </div>
  )
};

AppBar:

<Button id={props.id} color={props.color} variant={props.variant} 
href="#contained-buttons" onClick={props.handle}>{props.text}</Button>

Full code on Github.

CodePudding user response：

use variant="text" instead of variant="contained" for transforming button into text.

your code will be :

const connectWalletChecker = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='text' text='Connect Wallet' handle={connectWalletPressed}/>
      </div>
    )
  }

const AlreadyConnected = () => {

    return(
      <div>
        <SearchAppBar id='walletButton' apptitle={apptitle} color='primary' variant='text' text={walletAddress} handle={null}/>
      </div>
    )
  }

  return(
    <div>
      {walletAddress ? AlreadyConnected() : connectWalletChecker()}
      
    </div>
  )
};