Documentation needs instructions on how to theme

[kylegoetz]

The demos all have arcane CSS rules with no documentation. I see in the dist there's a theme.js, but I can't figure out how to import it and use it. So right now because of probably some copy/paste error from one of the demo CSS files to my own CSS the appearance of the suggestions is not aligned properly. Would be nice to know how I could import ./node_modules/react-autosuggest/dist/theme.js but can't find it in the documentation. So I think this counts as a bug I guess.

I want to do this because with the default create-react-app and then adding the autosuggest straight out of a demo (modifying the render item function) results in this, which as you can see does not line up correctly. The container of all of it has text-align: center. This appears to, without any custom styling, center only the search bar but not the results. CSS is copied and pasted straight out of one of the demos.

[kylegoetz]

Not sure what to do about this issue, whether to close this and create a new, or just leave a new comment, but here's what I discovered:

Styling applied to the parent container will only be applied to the INPUT but not to the DIV that contains the suggestions. So if you have a parent DIV with text-align: center, it will center the INPUT but not the contents of DIV (I think this is because a block-level element isn't supposed to be moved like that with text-align: center).

My provisional solution was to create a parent DIV that exists solely to contain the and style it position: absolute; left: 25%; width: 50%; and then to the .react-autosuggest__suggestions-container--open change width to 100% and give a padding: 0 20px; and then to .react-autosuggest__input change width to 100% and leave padding at the 10px 20px that you see in the demos. It works for my purposes, but might not for anyone else.

So there needs to be some fix for this. If I have time, I'll work on it, but I have a newborn daughter and am the primary caregiver, so it might take a few years :)

[nodediggity]

+1

I can't for the life of me understand themes with this plugin

[oliviertassinari]

You can find a theme integration example on the Material-UI documentation.

[rishabkdoshi]

+1, need better documentation/examples that use .css instead of .less to style

[kimhjona]

PSA: url for Material-UI example is now here

[oliviertassinari]

@kimhjona Right, sorry, I have updated the link (we just published a new version based on next.js).

[kimhjona]

ah, found it. link for those looking for the source code

[James-E-Adams]

Hi @moroshko! I'm also struggling to work out how to override default themes.

Here's what I'm doing at the moment:

import Autosuggest from 'react-autosuggest';
import { defaultTheme } from 'react-autosuggest/dist/theme';

    <Autosuggest
      //misc extra props I've cut out for brevity
      theme={{
        ...defaultTheme,
        ...{
              container: {
                ...defaultTheme.container,
                display: 'visible',
                width: '340px',
              },
              //more overrides
            }
      }}
    />

The goal is to keep the default theming for container, as well as add some overrides. Is that possible in someway like this?

Edit: From what I can tell, you're using this format from react-themeable:

Global CSS

.MyComponent__foo { color: red; }
.MyComponent__foo:hover { color: green; }
.MyComponent__bar { color: blue; }

const theme = {
  foo: 'MyComponent__foo',
  bar: 'MyComponent__bar'
};
...
<MyComponent theme={theme} />

But I haven't thought of an elegant way of including the existing default theme for container as well as providing some extra styles.

[taykcrane]

@kylegoetz If I read your comment correctly, you created a div just to contain the input? How did you do this... I desperately need to wrap the Autosuggest input in a container div for CSS reasons, but cannot figure out how to do this. The parent div that Autosuggest creates contains everything, including the suggestions list. I need a container specifically just for the input field.

Let me know what you did, thanks in advance.

[kylegoetz]

@taykcrane It's been a while, but I think I just wrote my React code to be

<div class="who-cares">
    <Autosuggest ... />
</div>

and then

.who-cares {
    position: absolute; 
    left: 25%; 
    width: 50%; 
}
.react-autosuggest__suggestions-container--open {
    width: 100%;
    padding: 0 20px;
}
.react-autosuggest__input {
    width: 100%;
    padding: 10px 20px;
}

possibly for styling the .react-autosuggest stuff I had to use !important to override. Maybe I made that css .who-cares .react-autosuggest... instead and didn't have to use the !important.

It was for a work thing (client demo) and I ended up solving it and never thinking about it again. Don't have the code around now, though. Sorry. Good luck!