Как правильно передавать класс компоненту?

В идеале компонентного подхода классы извне передавать не нужно. Компонент сам знает, как ему нужно отображаться. Чтобы его спозиционировать - оборачиваем и воздействуем на обёртку.

export function css(...classNames) {
    let result = [];
    for(let i=0; i<classNames.length; ++i) {
        if (Array.isArray(classNames[i])) {
            result = result.concat(classNames[i]);
        } else {
            result.push(classNames[i]);
        }
    }
    return result.join(' ');
}

import * as React from 'react';
import {css} from '../utils.js';

import './MyComponent.scss';
const BLOCK_CSS = 'my-component';
const BLOCK_MODIFIED_CSS = BLOCK_CSS + '--modifier';
const ELEMENT_CSS = BLOCK_CSS + '__element';


export class MyComponent: React.Component {
    ...
    public render() {
        const blockStateCss = [BLOCK_CSS];
        
        if (this.state.modificationNeeded) {
            blockStateCss.push(BLOCK_MODIFIED_CSS);
        }

        return (
            <div className={css(blockStateCss)}>
                <div className={css(ELEMENT_CSS)}>
                    ...
                </div>
            </div>
        );
    }
}

Единственного правильного способа существует.
Просто почитайте о способах стилизации компонентов React и выберите, тот который больше нравится и лучше подходит для вашего проекта.