Pass down the EUI classname attribute

[jusa3]

Each widget should provide styling options by passing down a classname property (see TitleWidget as an example).

[Pooya-Oladazimi]

As I looked the TitleWidget, I think we do not have to pass down the classname. we can assign the classname to the widget container and let user override it by using cascading in CSS with asterisk *

<div className={finalClassName}>
      {titleText &&
        <TitlePresentation
          titleText={titleText}
        />
      }

      {!titleText && isSuccess && data &&
        <TitlePresentation
          title={isOntology(data) ? data.getName() : data.getLabel()} />
      }

      {!titleText && isLoading && (defaultValue ? (
          <TitlePresentation titleText={defaultValue} />)
        : <EuiLoadingSpinner size="s" />)
      }

      {!titleText && isError && (defaultValue ?
        <TitlePresentation titleText={defaultValue} /> :
        <EuiText>{getErrorMessageToDisplay(error, "title")}</EuiText>)}
    </div>

and css:

.title-styles *{
  font-weight: bold;
}

[Pooya-Oladazimi]

The other issue with this approach (noticed in autocomplete) is that for complex component that comprises of many sub elements, we cannot customize all of them with one class for the parent component.
For example, in autocomplete, the className will affect which element? dropdown options? input box? terms tags?