extending JSX css element

Question

In react JSX theme I have 2 CSS elements.

button1: {
        color: 'white',
        borderColor: 'green',
        backgroundColor: 'white',
        "&:hover": {
            backgroundColor:"white"
        },
        borderTopRightRadius: "18px",
        borderBottomRightRadius: "18px",
        borderTopLeftRadius: "18px",
        borderBottomLeftRadius: "18px",
        width: '180px'
}
button2: {
        color: '#7F4095',
        borderColor: '#7F4095',
        backgroundColor: 'white',
        "&:hover": {
            backgroundColor:"white"
        },      
        borderTopRightRadius: "18px",
        borderBottomRightRadius: "18px",
        borderTopLeftRadius: "18px",
        borderBottomLeftRadius: "18px",
        width: '180px'
}

If you see most of the properties are same. How do I make sure I have 2 elements but they reuse the code.

Alex Python · Accepted Answer · 2019-01-27 11:34:38Z

1

You can use spread syntax:

const button_proto = {
  backgroundColor: 'white',
  "&:hover": {
    backgroundColor: "white"
  },
  borderTopRightRadius: "18px",
  borderBottomRightRadius: "18px",
  borderTopLeftRadius: "18px",
  borderBottomLeftRadius: "18px",
  width: '180px'
}

const styles = {
  button1: {
    ...button_proto,
    color: 'white',
    borderColor: 'green'
  },
  button2: {
    ...button_proto,
    color: '#7F4095',
    borderColor: '#7F4095',
  }
}

Documentation for spread syntax (...)

answered Jan 27, 2019 at 11:34

Alex Python

3271 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

extending JSX css element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related