Ich versuche, ein classname an das material-ui Button component zu übergeben, kann es aber anscheinend nicht zum Laufen bringen. Unten sind meine Versuche.

Versuch 1 :

attributes.map((attribute, index) => {
  const classString = 'classes.button' + index;
  console.log(classString)
  return (
    <Button className={classString} onClick={this.handleClick.bind(this, attribute)}> 
     {attribute} 
    </Button>
  )}
)}

Versuch 2 :

attributes.map((attribute, index) => {
  const classString = 'classes.button' + index;
  console.log(classString)
  return (
    <Button className={'${classString}'} onClick={this.handleClick.bind(this, attribute)}>
      {attribute}
    </Button>
  )}
)}

Ich habe auch das Klassennamen-Paket npm ausprobiert, aber selbst das funktioniert nicht.

Jede Hilfe wäre dankbar, danke!

0
Joseph Tsui 18 Apr. 2018 im 15:18

3 Antworten

Beste Antwort

Ich denke, classes ist ein Objekt mit einem Schlüssel als button. // Im Material-UI-Beispiel übergeben sie classes als props

Ändern Sie Ihre classString Deklaration ein wenig. Stellen Sie sicher, dass Sie das classes Objekt übergeben und es den Schlüssel button hat.

attributes.map((attribute, index) => {
  const classString = classes.button + `${index}`; // best practice to add string to a number
  return (
    <Button className={classString} onClick={this.handleClick.bind(this, attribute)}> 
      {attribute} 
     </Button>
  )}
)}

Wenn Sie immer noch mit dem Problem konfrontiert sind, liegt das Problem beim Objekt classes. Um es zu testen, ändern Sie die Zeile const classString = classes.button + $ {index} ; in

const classString = 'random-class';

Und prüfen Sie, ob die Schaltfläche die Klasse random-class erhält

Bearbeiten:

Da Ihr classes Objekt ungefähr so aussieht:

{
  class1: _class2-something-15443",
  class2: ....,
  ...
}

Sie sollten classString entsprechend ändern.

Ändere es in: const classString = classes[`class${index}`];

2
Syam Pillai 18 Apr. 2018 im 15:54

https://reactjs.org/docs/faq-styling.html

  • className={yourVariableName}
  • className={'redDiv'}
1
deathangel908 18 Apr. 2018 im 12:24

Die Material-Benutzeroberfläche implementiert CSS-in-js und verwendet die Komponente höherer Ordnung von material-ui / styles 'withStyles'. Schauen Sie sich die Button-Demo auf der Website an, da sie äußerst hilfreich ist. https: // material-ui -next.com/demos/buttons/

0
eskers 18 Apr. 2018 im 16:42