Utilizing Emotion CSS to incorporate images into buttons

Question

Utilizing Emotion CSS to incorporate images into buttons

I'm trying to add some style to two buttons, Up and Down, by using emotion CSS but I'm having trouble. Currently, I typically style my elements within a function. Is there a way for me to accomplish this with emotion CSS? I checked out but still can't seem to get it right.

    import up from "../img/up.png";

    function CustomButton(props) {
    let styling = {
    background: `url(${up})`,
    paddingRight: 24,
    paddingTop: 26,
    paddingLeft: 26,
    paddingBottom: 26.6
    };
    return (
    <button style={styling} onClick={() => props.handleClick()}>{props.background}</button>
    );
    }

//A similar code structure is written for CustomButton2


function Post(props) {
    return (
    <div>
                    <Up >
                        <CustomButton src={"../images/up.png"} handleClick= . 
     {props.incrementScore} />
                    </Up>

                    <Down >
                        <CustomButton2 src={"../images/down.png"} 
 handleClick{props.decrementScore} />
                    </Down>
                </Col>
            </Row>
        </Container>
    </div>
    );
}

css reactjs typescript emotion

Answer 1

Answer №1

If the src attribute contains the background image, it seems necessary to modify the background property in order to incorporate the prop:

background: `url(${props.src})`,

Answer 2

If the src attribute contains the background image, it seems necessary to modify the background property in order to incorporate the prop:

background: `url(${props.src})`,

Answer 3

Answer №2

Make sure to utilize the src prop to specify the image path.

// One method is to use css from emotion/react

/** @jsx jsx */
import { jsx, css } from '@emotion/react'

const PostButton = ({ background, handleClick, src }) => (
  <button css={css`
    background: ${`no-repeat url(${src})`};
    padding: 26px 24px 26.6px 26px;
  `} 
  onClick={handleClick}>{background}</button>
)

// Another approach involves using css from emotion/css

import React from 'react'
import { css } from '@emotion/css'

const PostButton = ({ background, handleClick, src }) => (
  <button className={css`
    background: ${`no-repeat url(${src})`};
    padding: 26px 24px 26.6px 26px;
  `} 
  onClick={handleClick}>{background}</button>
)

// A third option is to use css from emotion/css and pass styles as an object

import React from 'react'
import { css } from '@emotion/css'

const PostButton = ({ background, handleClick, src }) => (
  <button className={css({
    background: `no-repeat url(${src})`,
    padding: '26px 24px 26.6px 26px'
  })} 
  onClick={handleClick}>{background}</button>
)

Answer 4

Make sure to utilize the src prop to specify the image path.

// One method is to use css from emotion/react

/** @jsx jsx */
import { jsx, css } from '@emotion/react'

const PostButton = ({ background, handleClick, src }) => (
  <button css={css`
    background: ${`no-repeat url(${src})`};
    padding: 26px 24px 26.6px 26px;
  `} 
  onClick={handleClick}>{background}</button>
)

// Another approach involves using css from emotion/css

import React from 'react'
import { css } from '@emotion/css'

const PostButton = ({ background, handleClick, src }) => (
  <button className={css`
    background: ${`no-repeat url(${src})`};
    padding: 26px 24px 26.6px 26px;
  `} 
  onClick={handleClick}>{background}</button>
)

// A third option is to use css from emotion/css and pass styles as an object

import React from 'react'
import { css } from '@emotion/css'

const PostButton = ({ background, handleClick, src }) => (
  <button className={css({
    background: `no-repeat url(${src})`,
    padding: '26px 24px 26.6px 26px'
  })} 
  onClick={handleClick}>{background}</button>
)

Utilizing Emotion CSS to incorporate images into buttons

Answer №1

Answer №2

Similar questions

What is the best way to incorporate a feature that flips all choices in react-select?

CSS3 problem with using transparent PNGs as border images

What could be causing the error during the build process when using eslint version 5.6.0?

Tips for aligning text and an image next to each other within a table column using HTML

The icon in Material UI button is missing from the display

Using type aliases in Typescript to improve string interpolation

Increase the distance between input boxes using CSS styling

How to dynamically update a list in a React autocomplete input field?

Confusion over React Prop being rendered as an object - perplexed by the reason behind it

Selecting the label "for" will activate both the anchor tag and input tag simultaneously

Step-by-step guide to crafting curved bars in Material-UI X visualizations

Place an element in a higher position than a slideshow

It is recommended that the page does not scroll while utilizing both the sidenav and toolbar simultaneously in Angular Material

Add a container element resembling a div inside a table without implementing the table layout

Adding a border in jQuery or Javascript to highlight empty form fields

"Experiencing a callstack overflow due to multiple carousels on one page using Jquery or Vanilla

Using a third-party React component within a web-based forms application

Issue: The parameter "data" is not recognized as a valid Document. The input does not match the requirements of a typical JavaScript object

Trouble with Bootstrap 3's nav-justified feature not displaying correctly upon window expansion

Is there a way to decrease the size of the content within this iFrame?