javascript - React.js question: How do I apply multiple classes to a component using a ternary operator? - Stack Overflow

admin管理员组

文章数量:1279043

I want to apply multiple classes to a ponent using a ternary operator. There is a shared ts theme file that includes the general button styles, but I would like to display their sizes in this particular ponent differently depending on screen width, so have added locally scoped classes for this too.

What is the best approach for this?

...tried this, not working:

...got it working using classNames.

I want to apply multiple classes to a ponent using a ternary operator. There is a shared ts theme file that includes the general button styles, but I would like to display their sizes in this particular ponent differently depending on screen width, so have added locally scoped classes for this too.

What is the best approach for this?

...tried this, not working:

...got it working using classNames.

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Sep 11, 2019 at 9:31 AKL012 asked Sep 11, 2019 at 8:57 AKL012AKL012 39966 silver badges1414 bronze badges 3

• So there is more than two classes to be applied to the same ponent? – minus.273 Commented Sep 11, 2019 at 9:10
• as a string :) instead classes.saveButton ` ${classes.saveButton} other-class ` – Kasia Commented Sep 11, 2019 at 9:17
• Use module like classnames or clsx. These are built for this purpose. – Sandip Nirmal Commented Sep 11, 2019 at 9:26

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I usually use a small npm package called classNames: https://www.npmjs./package/classnames.

It exposes a function that takes a variable number of arguments. If you give strings, they will be basically joined with a space, so you have them all applied:

<Button className={ classNames('first', 'second') } ...

Will be like doing:

<Button className="first second" ...

A nice feature that this package has, is that it can take an object where the key is the class and the value is a boolean that indicates whether to add this class or not, something like:

<Button className={ classNames({ even: index % 2 === 0, disabled: props.isDisabled }) } ...

Now, if index is something like 2, the even class is added to the element.

You can use clsx, I think it's already installed if you use material-ui, and you can see that in material-ui's documentation examples.

import clsx from 'clsx';

// Bellow examples are from the clsx npm site:

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

Material UI classes are piled to classname strings, you can chain them with a space between each one :

<Button
  classes={{
    root: isDesktop ? `${classes.saveButton} ${classes.secondStyle}` : classes.disabledSaveButton
  }}
>

npm package classnames can do this for you in a cleaner way if you need to handle more plex cases.

1. You can use two different styles files in css directory for Desktop and Mobile and in index file make switch to export right css. For example: Styles Directory that contains => 2 css files: Mobile,Desktop and in same directory index.js for export right one.
2. By Using Theme Providers: styled-ponents

本文标签：