Is there any slider for react material-ui chips?

Question

I'm using react material-ui chips in my navigation bar; however, seems like material-ui has not devised any feature to slide the chips in an array. I wanted to ask how can I make a slider for chips array list so that I can scroll horizontally amon the chips?

Answer 1

You can achieve this by customizing the tab component for example:

    const ChipTabs = withStyles({
    root: {
        alignItems: 'center',
        minHeight: '0px'
    }
})(Tabs);

const ChipTab = withStyles((theme) => ({
    root: {
        textTransform: 'none',
        backgroundColor: '#e0e0e0',
        borderRadius: '16px',
        minWidth: 0,
        minHeight: 0,
        height: '24px',
        fontSize: '0.8125rem',
        whiteSpace: 'nowrap',
        marginRight: '4px',
        fontFamily: "Roboto"
    }
}))((props) => <Tab disableRipple {...props} />);

then:

                    <ChipTabs
                                variant="scrollable"
                                scrollButtons="auto"
                            >
                                <ChipTab label="some text"/>
                            </ChipTabs>

see other examples here: https://mui-treasury.com/styles/tabs/