What is a convenient way to destructure imported CSS module for use in a component?

Question

I am using CSS modules (css-loader & less-loader combination).

I import styles in my Class components like so:

    import styles from "./AccountSettings.module.less";

And in the JSX I access the styles like so:

    className={styles.whatever}

But this doesn't seem like the easiest way to do it. How do you achieve similar?

I have attempted to use destructuring, without success:

    const {...styles} = this.styles;