Jaime, parte de este equipo, nos hizo el favor de redactar este artículo porque conoce a la perfección este tema.
Solución:
Ionic está inyectando un elemento dentro del
El Ionic CSS contiene una propiedad CSS:
.item-content
background-color:#ffffff;
El CSS en línea que agregó se está aplicando al elemento detrás del elemento con el #ffffff fondo, por lo que no puede ver el color de fondo.
Aplicar el color de fondo a la .item-content como @ariestiyansyah recomendó agregar el siguiente CSS al archivo Ionic CSS, o crear un archivo CSS personalizado e incluir un en el encabezado, con lo siguiente:
.item .item-content
background-color: transparent !important;
Aquí está la demostración de trabajo.
Quiero compartir mi solución:
Uso las propiedades CSS personalizadas de ionic 4, por lo que si quiero cambiar el color de fondo, puedo crear una nueva clase llamada “.item-background-color” y cambiar el color de la propiedad CSS que quiero modificar. Por ejemplo:
mi-pagina.pagina.scss
.item-background-color
--ion-item-background:#015f01d5;
luego, solo agrego mi nueva clase al elemento iónico:
mi-pagina.pagina.html
My item with new background color
Lo que se hace es cambiar la variable que afecta el color del ítem iónico, para que puedas agregar todas las clases que quieras, dinámicamente o no, y cambiar los valores de sus respectivas variables. Puede encontrar información sobre las variables en CSS Custom Properties
Espero que mi respuesta sea útil para las personas que necesitan modificar las propiedades CSS de los 4 componentes iónicos, ¡perdón por mi mal inglés y buena suerte!
Simplemente, use colores en variables.scss archivo (también puede definir nuevos colores) así
$colors: (
primary: #f9961e,
secondary: #882e2e,
danger: #f84e4e,
light: #f4f4f4,
dark: #222,
newColor: #000000,
);
y en su archivo html:
Test
Si guardas algún recelo y forma de aclararse nuestro tutorial te sugerimos añadir una aclaración y con gusto lo ojearemos.