Dado el código de la Card como aquí . ¿Cómo puedo actualizar el estilo de la tarjeta o cualquier estilo de interfaz de usuario material a partir de:
const styles = theme => ({ card: { minWidth: 275, },A tal sigue:
const styles = theme => ({ card: { minWidth: 275, backgroundColor: props.color },cuando probé el último, obtuve
Line 15: 'props' is not defined no-undefcuando actualicé el código para que sea:
const styles = theme => (props) => ({ card: { minWidth: 275, backgroundColor: props.color },además
const styles = (theme ,props) => ({ card: { minWidth: 275, backgroundColor: props.color },En vez de
const styles = theme => ({ card: { minWidth: 275, backgroundColor: props.color },Tengo el estilo de la tarjeta de componente en la página web desordenado.
Por cierto, paso props de la siguiente manera:
<SimpleCard backgroundColor="#f5f2ff" />¡por favor ayuda!
Eliminé la respuesta anterior, porque no es razón para existir.
Esto es lo que quieres:
import React from 'react'; import { makeStyles } from '@material-ui/core'; const useStyles = makeStyles({ firstStyle: { backgroundColor: props => props.backgroundColor, }, secondStyle: { color: props => props.color, }, }); const MyComponent = ({children, ...props}) =>{ const { firstStyle, secondStyle } = useStyles(props); return( <div className={`${firstStyle} ${secondStyle}`}> {children} </div> ) } export default MyComponent;Ahora puedes usarlo como:
<MyComponent color="yellow" backgroundColor="purple"> Well done </MyComponent>Solución sobre cómo usar accesorios y temas en material ui:
const useStyles = props => makeStyles( theme => ({ div: { width: theme.spacing(props.units || 0) } })); export default function ComponentExample({ children, ...props }){ const { div } = useStyles(props)(); return ( <div className={div}>{children}</div> ); }Aquí la solución mecanografiada :
import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import {Theme} from '@material-ui/core'; export interface StyleProps { height: number; } const useStyles = makeStyles<Theme, StyleProps>(theme => ({ root: { background: 'green', height: ({height}) => height, }, })); export default function Hook() { const props = { height: 48 } const classes = useStyles(props); return <Button className={classes.root}>Styled with Hook API</Button>; }Si quieres jugar con él, pruébalo en este CodeSandbox