Conflicting css style sheets

Dash Python
1

I am using external css style sheets to get some custom fonts

external_css = ["https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css",
                "//fonts.googleapis.com/css?family=Roboto|Lato"]
for css in external_css:
    app.css.append_css({"external_url": css})

I am also trying to use a grid from another style sheet:

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

However, that causes conflict and the app style doesn’t pick up the custom fonts I needed.

How can I mitigate this issue?

2

I can’t seem to replicate this. Seems to be working in the following app, with the element’s font-family being set to Roboto.

from dash import Dash
from dash.dependencies import Input, State, Output
import dash_core_components as dcc
import dash_html_components as html


app = Dash()
app.layout = html.Div([
    html.Div(id='target', style={'fontFamily':'Roboto'}),
    dcc.Input(id='input', type='text', value=''),
    html.Button(id='submit', n_clicks=0, children='Save')
])

external_css = [
    "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css",
    "//fonts.googleapis.com/css?family=Roboto|Lato",
    'https://codepen.io/chriddyp/pen/bWLwgP.css',
]

for css in external_css:
    app.css.append_css({"external_url": css})


@app.callback(Output('target', 'children'), [Input('submit', 'n_clicks')],
              [State('input', 'value')])
def callback(n_clicks, state):
    return "callback received value: {}".format(state)


if __name__ == '__main__':
    app.run_server(debug=True)