How to use the ember-css-modules.localClassName function in ember-css-modules

* ```
 * @class file-icon
 */
@layout(template, styles)
@classNames('container')
@localClassNames('file-browser-item')
export default class FileBrowserItem extends Component {
    @service analytics!: Analytics;
    @service store!: DS.Store;

    item?: File;
    @requiredAction openItem!: (item: File | undefined, show: string) => void;
    @requiredAction selectItem!: (item: File | undefined) => void;
    @requiredAction selectMultiple!: (item: File | undefined, metaKey: boolean) => void;

    @localClassName()
    @computed('item.isSelected')
    get selected(): boolean {
        return !!this.item && this.item.isSelected;
    }

    @computed('item.size')
    get size(): string {
        // TODO: This should be i18n-ized
        return this.item && this.item.size ? humanFileSize(this.item.size, true) : '';
    }

    @computed('item.dateModified')
    get date(): string {
        // TODO: This should be i18n-ized
        return this.item ? moment(this.item.dateModified).format('YYYY-MM-DD h:mm A') : '';
    }

*    file=file
 *    selectItem=(action 'selectItem') - Action handling clicking on the body of the row
 *    openItem=(action 'openItem') - Action handling clicking the link-name of the file
 * }}
 * ```
 * @class file-icon
 */
@layout(template)
@localClassNames('FileListItem')
export default class FileListItem extends Component.extend({ styles }) {
    @service store!: DS.Store;

    item?: File;
    @requiredAction openItem!: (item: File | undefined) => void;

    @localClassName()
    @computed('item.isSelected')
    get selected(): boolean {
        return !!this.item && this.item.isSelected;
    }

    @computed('item.guid')
    get link(): string {
        return this.item && this.item.guid ? pathJoin(window.location.origin, this.item.guid) : '';
    }

    @action
    open(ev?: Event) {
        if (ev) {
            ev.stopPropagation();
        }
        this.openItem(this.item);