css - 扩展 JSX css 元素

Question

在 React JSX 主题中，我有 2 个 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 个元素但它们重用了代码。

Answer 1

你可以使用扩展语法:

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 (...)