Apply chakra-ui's emotion Input style to SearchBox: Possible?

[tony]

I am trying to get @chakra-ui's <Input> field's (theme file) into <DataSearch>.

Using ReactiveSearch v3, uses emotion also. Which is neat! However in the docs, theme examples don't specify how to style the input component in DataSearch w/ emotion. At the moment it mentions just mentions custom components - which don't seem to assist theming the "out of the box" components like SearchBox, ReactiveList, etc.

Reactive Search has 3 pages on theming:

• https://opensource.appbase.io/reactive-manual/theming/themes.html

• https://opensource.appbase.io/reactive-manual/theming/style.html

  Using the style attribute as the primary means of styling elements is generally not recommended. ReactiveSearch components also support className prop allowing you to style them using CSS classes.

  If you enter style={...} details into DataSearch, it doesn't style the <input />, it styles wrappers.

• https://opensource.appbase.io/reactive-manual/theming/class.html
  I would prefer not to use this, but it's the only thing that's available

  I scoured GH search the Mission Apprentissage website uses chakra-ui and reactivesearch website uses the classname approach: Search.js + search.scss

[tony]

Workaround (better than importing .css, and uses chakra's <Input> + your theme's settings)

For TypeScript + JSX

import React from "react";

import { DataSearch, ReactiveBase } from "@appbaseio/reactivesearch";
import {
  useTheme,
  useMultiStyleConfig,
} from "@chakra-ui/react";
import { Global, Interpolation, Theme } from "@emotion/react";
import { css, CSSObject } from "@chakra-ui/styled-system";

export const SearchModal: React.FC = () => {
  const chakraTheme = useTheme();
  const inputTheme = useMultiStyleConfig("Input", {});
  const inputStyle = css(inputTheme)(chakraTheme)?.field as CSSObject;
  const reactiveBaseStyle = {
    "input.search-input": inputStyle,
  } as Interpolation<Theme>;

  return (
    <>
      <Global styles={reactiveBaseStyle} />
      <ReactiveBase app="yourapp" url={yoururl}>
        <DataSearch
          showIcon={false}
          componentId="SearchResult"
          innerClass={{ input: "search-input" }}
        />
      </ReactiveBase>
    </>
  );
};

If we had documentation on how to style <DataSearch>'s <input> with emotion themes, that would be superb and there wouldn't be a need to for this hacky approach.