CODEWITHSUNDEEP
cssreactjs
yestema
yestema

Reputation: 8102

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

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',
  }
});

Upvotes: 0

Views: 34

Answers (1)

Ted
Ted

Reputation: 14927

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`,

Upvotes: 1

Related Questions