0

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.

Improve this question

1 Answer 1

Reset to default
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 (...)

Improve this answer