Styling text inside query builder dropdown

[kamelabiad]

Is it possible to apply styling for the text inside the query builder dropdown ?

[jakeboone02]

The default dropdown components just render standard HTML5 <select> elements with some classes added, but no additional styling. You can style the RQB dropdown components in any way you can style a regular <select>. You can also replace the dropdown components completely with your own component.

Relevant documentation:

• Styling
• Custom components

[kamelabiad]

I have followed the above links, but i have noticed that the values dropdown is changing and not the field name , in my case i want to update the first dropdown which Contains "Dte range,DOB,Name" and use my own component

[jakeboone02]

Can you provide some example code? A working sandbox would be best. To use a custom component for the field dropdown you need to assign the component with controlElements={{ fieldSelector: YourComponentName }}.

[kamelabiad]

Hi again , this is my code

import React from "react";
import FormControl from "@mui/material/FormControl";
import NativeSelect from "@mui/material/NativeSelect";

const CustomDropdown = (props) => {
  return (
    <FormControl style={{ width: "50%" }}>
      <NativeSelect
        defaultValue={props.value}
        onChange={(event) => {
          props.handleOnChange(event.target.value);
        }}
      >
        {props.options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </NativeSelect>
    </FormControl>
  );
};

export default CustomDropdown;

                <QueryBuilderAntD>
                  <QueryBuilder
                    query={query}
                    fields={ruleFields.fields}
                    onQueryChange={handleQueryChange}
                    controlElements={{ fieldSelector: CustomDropdown }}
                  />
                </QueryBuilderAntD>

"For some reason, when using this custom dropdown, the value field type is not changing based on my selection. It used to work for textboxes, radio buttons, and checkboxes, but after implementing this approach, it consistently displays as a textbox."

[jakeboone02]

At first glance, I can't see an issue with your code as far as functionality, but I think part of what's wrong with what you're seeing is that your base compatibility provider is Ant Design-based (<QueryBuilderAntD />) while your custom dropdown is MUI-based (import ... from '@mui/material'). My guess it that's unintentional, and you should use <QueryBuilderMaterial /> instead of <QueryBuilderAntD />.