[CSS Modules] Multiple binds in same component?

[kevinSuttle]

Is the following possible? I cannot seem to get it to work.

let inputClasses = classNames.bind(inputStyles);
let labelClasses = classNames.bind(labelStyles);
let inputClassList = inputClasses({
  inputField: true,
  preValidated: this.state.focused,
});

let validationMessageClassList = labelClasses({
  errorLabel: true,
  postValidated: !this.state.focused,
});

<TextInput className={inputClassList} />
<ErrorLabel className={validationMessageClassList} />

For some reason, the styles appear in React Dev Tools, but not in the DOM.
Look for postValidate in the following screenshots. It only appears in RDT.

[koulmomo]

try

let inputClasses = classNames.bind(null, inputStyles);
let labelClasses = classNames.bind(null, labelStyles);

function.prototype.bind takes thisArg as a first parameter

[kevinSuttle]

That actually broke it.

How I fixed it:
made sure the presentational components did not have classNames, except for props.className. Then, in the container component, I just used the syntax above.