通过自定义组件传递样式

Question

我有一个自定义组件，可在我的项目中生成下拉菜单，但是我需要在应用程序的各个页面上分别对这些下拉菜单进行样式设置，为此，我可能需要在组件中传入样式的支持，那么什么时候叫编辑说风格呢？

我的组件

const Search = (props) => {
    const { type: TYPE, name: NAME, label: LABEL, onSelect, filter, value } = props;
    const [data, setData] = useState([]);
    const [select, setSelect] = useState(value || -1);

    const applyFilter = (data) => {
        let result = data;
        if (filter) {
            result = filter(data);
        }
        return result;
    };

    useEffect(() => {
        getLookupData(TYPE)
            .then((response) => {
                setData(response);
            })
            .catch((error) => {
                if (error === HttpStatus.NOT_FOUND) {
                    setData([]);
                } else {
                    throw error;
                }
            });
    }, [TYPE]);

    useEffect(() => {
        if (value) {
            setSelect(value);
        }
    }, [value]);

    const options = applyFilter(data).map((item) => (
        <MenuItem value={item.id} key={item.id}>
            {item[NAME]}
        </MenuItem>
    ));

    const handleChange = (event) => {
        setSelect(event.target.value);
        onSelect && onSelect(event);
    };

    const { classes } = props;
    const labelProps = { ...(props.required && { required: props.required }) };
    return (
        <FormControl className={classes.formControl} id={NAME} error={props.error}>
            <FormControlLabel control={<InputLabel htmlFor={NAME} {...labelProps}>{LABEL}</InputLabel>} />
            <Select
                name={TYPE}
                value={select}
                onChange={handleChange}
                disabled={props.disabled || options.length === 0}
                input={<Input name={TYPE} id={NAME} />}
            >
                {props.showNone && (<MenuItem value="">
                    <em>None</em>
                </MenuItem>)}
                {options}
            </Select>
        </FormControl>
    );
};

然后下面是我在需要时如何称呼所说的组件，您会注意到我已经尝试内联它的样式并给它一个className，但这似乎不起作用

<CardHeader className={classes.cardHeader} classes={{ title: 
classes.cardHeader }}
                avatar={
                    <Home />
                }
                title="Contracts"
                action={
                    <Search
                        style={{ marginRight: 20 }}
                        className={classes.contractSelect}
                        type="procurementType"
                        name="procurementType"
                        label="Contracts Available"
                        id="procurementTypeId"
                        onSelect={handleChange}
                        value={selectedProcurementType}
                    />
                }
            />