扩展JSX css元素

在react JSX主题中，我有两个CSS元素

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'
}

---

如果您看到大多数属性都是相同的。如何确保我有2个元素，但它们重用代码

您可以使用扩展语法：

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