Intenté buscar una respuesta a esto, pero no encontré nada que funcionara.

Estoy trabajando en React, usando componentes con estilo.

Obtuve un archivo styles.js que contiene todo mi css para un componente en el que estoy trabajando. El problema es que estoy tratando de poner una imagen de un dado en un conjunto de botones. Los botones se utilizan en el componente como:

 <Button></Button>

Si quiero sobrescribir un estilo de botones en particular, tengo reglas (¿como accesorios, creo?) en el mismo archivo styles.js. Esto es lo que es este botón de problema específico:

 // Style override for a Randomiser Button ${props => props.RANDButton && css` background: transparent url('../Images/D20.png') no-repeat; width: 50px; height: 50px; border: outset 1px; border-radius: 0px; `}

Aquí está el código 'original' que usan todos los botones a menos que se sobrescriba:

 //style(s) for a button export const Button = styled.button` background-color: rgb(100,250,100); box-shadow: 2px 2px 3px black; color: black; border: outset; border-radius: 10px; padding: 5px; margin: 5px; text-align: Center; width: auto; font-weight: bolder; font-size: 1.5rem; font-variant: small-caps; ... *Other css rules* ... `;

Entonces, este botón específico se usa así:

 <Button RANDButton></Button>

Lo siento, no recuerdo la terminología adecuada para este método.

Cuando guardo y el componente se vuelve a renderizar, no muestra la imagen.

Si me he perdido algo básico, ¿podría alguien señalarmelo?

Gracias