react css style syntax - set value of css prop with variables and text in one line

Question

I have this code:

const styles = theme => ({
  root: {
    paddingTop: theme.spacing.unit * 3,
    paddingBottom: theme.spacing.unit * 3,
    paddingLeft: 0,
    paddingRight: 0,
  }
});

Is it posible to set padding with only one line? (I want to do something like this:)

const styles = theme => ({
  root: {
    padding: 0 theme.spacing.unit * 3',
  }
});

yes, you can, try padding: theme.spacing.unit*3 0,

Girisha C
– Girisha C

2018-07-17 16:07:12 +00:00
Commented Jul 17, 2018 at 16:07 — Girisha C
– Girisha C, Commented Jul 17, 2018 at 16:07

Ted · Accepted Answer · 2018-07-17 16:33:02Z

1

Yes, you can do it by creating the string like so (using template literals):

const styles = theme => ({
  root: {
    padding: `${theme.spacing.unit * 3} 0`,
  }
});

If the theme spacing unit was 10px that would result in padding: 10px 0, which is shorthand for padding: 10px 0 10px 0;

It is important to use the back ticks (`) and not quotes.

One thing to note, if your theme.spacing.unit does not include the unit of measure, add it after the curly braces like so:

padding: `${theme.spacing.unit * 3}px 0`,

edited Jul 17, 2018 at 16:33

answered Jul 17, 2018 at 16:27

Ted

14.9k2 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yestema Over a year ago

Thank you. I've forgot about "px"))) The last variant works perfectly.

Collectives™ on Stack Overflow

react css style syntax - set value of css prop with variables and text in one line

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related