0
376
Vistas¿Cómo alinear correctamente el ícono material-ui dentro de un botón?
¿Cómo alineo correctamente el <ChevronRightIcon> dentro <PrimaryButton> ? Lo quiero después de la etiqueta del botón hacia la derecha.
<PrimaryButton style={{ paddingRight: '26px' }} label="Open Button" aria-controls="simple-menu" aria-haspopup="true" onClick={this.handleOpenMenu.bind(this) } className={classes.progress} color="#fff" > <ChevronRightIcon></ChevronRightIcon> </PrimaryButton> <ChevronRightIcon> es de material-ui y <PrimaryButton> es de creación propia.
import React from 'react'; import RaisedButton from 'material-ui/RaisedButton'; export default function PrimaryButton(props) { const style = { height: 36, boxShadow: 'none', ...props.style, }; return ( <RaisedButton {...props} primary style={style} name="primary-button"> {props.children} </RaisedButton> ) } PrimaryButton.muiName = 'RaisedButton';
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Si desea utilizar un ícono en un botón normal, debe pasar su ícono a la documentación de startIcon o endIcon prop (en su caso, endIcon ). Entonces no olvide pasar todos los accesorios pasados de su PrimaryButton a su componente <Button/> .
<PrimaryButton endIcon={<ChevronRightIcon />} style={{ paddingRight: '26px', }} label="Open Button" aria-controls="simple-menu" aria-haspopup="true" onClick={this.handleOpenMenu.bind(this)} className={classes.progress} color="#fff" /> // import ChevronRightIcon from '@material-ui/icons/ChevronRight'; const icon = (name) => (props) => <MaterialUI.Icon {...props} children={name} />; const ChevronRightIcon = icon("chevron_right"); function Demo() { return ( <PrimaryButton endIcon={<ChevronRightIcon />} label="Open Button" variant="contained" // ... /> ); } function PrimaryButton({label, ...props}) { return ( <MaterialUI.Button {...props} color="primary" children={label} /> ); } ReactDOM.render(<Demo />, document.querySelector("#demo")); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <script crossorigin src="https://unpkg.com/@material-ui/core@4/umd/material-ui.development.js"></script> <div id="demo"></div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta