Ich schreibe eine einfache React-Komponente, wo ich den Komponentenstil ändern, wenn der Mauszeiger auf der Komponente ist. Ich konnte meine Komponente funktionieren lassen, aber ich habe zwei Stylesheets, die fast gleich sind. Ein Stil wird für onMouseOver
verwendet und der andere wird für onMouseOut
Ereignis verwendet. Der Unterschied zwischen den beiden Stylesheets ist nur eine Zeile: die border
Definition.Erweitern gemeinsame CSS-Definition in React
Ich möchte duplizierten CSS-Definitionen vermeiden, und ich möchte meine CSS vereinfachen nach folgendem:
- ein basisches Sheet, das die Suche der Komponente
- einen Stil für onMouseOver erstreckt Grund beschreibt Ereignis (enthält nur Grenze)
- ein anderer Stil für onMouseOut Ereignis Grund verlängern (enthält nur Grenze)
Dies ist das Stylesheet definit Ion, was ich mag zu verwenden:
const STYLE = {
box: {
'-moz-border-radius': '15px',
'-moz-box-shadow': '#B3B3B3 13px 13px 13px',
'-webkit-box-shadow': '#B3B3B3 13px 13px 13px',
'background-color': '#E3A20B',
'border-radius': '15px',
'border': '5px solid #FFFF00',
'box-shadow': '#B3B3B3 13px 13px 13px',
'float': 'left',
'height': '215px',
'margin': '15px',
'width': '150px'
},
boxMouseOver: {
'border': '5px solid #000000',
},
boxMouseOut: {
'border': '5px solid #FFFF00',
}
}
Das ist mein Arbeits Code verwendet zwei Stylesheets:
<div style={this.state.mouseOver ? STYLE.boxOver : STYLE.boxDefault} onMouseOver={...} onMouseOut={...}>
...
</div>
Und das ist, was ich tun möchte, aber leider funktioniert es nicht:
Was ist der richtige Weg, um zwei verschiedene Stile zu einer Komponente hinzuzufügen oder wie kann ich die Konstante STYLE.box erweitern und die Eigenschaft border in Stylesheets für Abstieg neu definieren?
Das ist so knifflige Syntax vor allem, wenn ich es mit Java vergleichen;) Wie auch immer, es funktioniert wie ein Zauber. Könnten Sie bitte das fehlende '}' Zeichen in Ihrem Beispiel hinzufügen? Vielen Dank. – zappee