reactjs - React-Simple-Chatbot 动态更改主题

Question

我正在使用 react-simple-chatbot 创建一个对话机器人。我希望用户根据自己的喜好更改机器人的主题。当用户单击红色、蓝色、绿色中的一个选项时，如何动态更改主题？

import ChatBot from 'react-simple-chatbot';
import { ThemeProvider } from 'styled-components'

const theme = {
    background: '#f5f8fb',
    fontFamily: 'Helvetica Neue',
    headerBgColor: '#EF6C00',
    headerFontColor: '#fff',
    headerFontSize: '15px',
    botBubbleColor: '#EF6C00',
    botFontColor: '#fff',
    userBubbleColor: '#fff',
    userFontColor: '#4a4a4a',
};

const config = {
    width: "400px",
    height: "500px",
    floating: true,
};

class IdentityForm extends Component {
    render() {
        return (
            <ThemeProvider theme={theme}>
                <ChatBot
                    steps={[
                        {
                            id: '1',
                            message: 'Choose your favourite theme',
                            trigger: '2',
                        },
                        {
                            id: '2',
                            options: [
                                { value: 1, label: 'Red', trigger: '1' },
                                { value: 2, label: 'Green', trigger: '1' },
                                { value: 3, label: 'Blue', trigger: '1' },
                            ],
                        },
                    ]}
                    {...config}
                />
            </ThemeProvider>
        );
    }
}

export default IdentityForm;```