Plotly dash dropdown boarder 没有按预期出现

Question

我正在创建一个带有下拉菜单的 Plotly 破折号。我正在为下拉菜单提供边框。我有一个主标题。我需要将下拉菜单放在带有框的主标题之后。请在下面查看我的代码。

现在，我的边框也覆盖了我的主标题。我不需要那个。我只需要下拉部分的边框。请参阅显示我目前情况的附图。

请问我哪里出错了

fig_dropdown = html.Div([
    
    html.Div(html.H1(children="TEST SUIT1"),style={'textAlign': 'center','color': '#5742f5', 'fontSize': 20}),
    
    dcc.Dropdown(
        id='fig_dropdown',
        options=[{'label': x, 'value': x} for x in fig_names],
        value=None
    )], style= { 
                 
                 'border': '#eb345b',    
                 'color': '#5e34eb',
                 'borderStyle':'dashed',
# #                  'width': '50%',                  
                 'font-size': '20px'
                                      
                }
)

Answer 1

我没有渲染这个，但是将下拉列表包装在一个 div 中，然后在其中应用样式可能会给你想要的东西。从您的示例中，您将样式应用于第一个 html.Div()

fig_dropdown = html.Div([
    html.Div(
        html.H1(children="TEST SUIT1"),
        style={
            'textAlign': 'center',
            'color': '#5742f5', 
            'fontSize': 20}),
    html.Div(
        dcc.Dropdown(
            id='fig_dropdown',
            options=[{'label': x, 'value': x} for x in fig_names],
            value=None
            ), style= {              
                    'border': '#eb345b',    
                    'color': '#5e34eb',
                    'borderStyle':'dashed',
                    # 'width': '50%',                  
                    'font-size': '20px'          
                    }
            )])

编辑：我自己将样式放置在错误的位置。 :)