web-dev-qa-db-ja.com

Pythonダッシュ：カスタムCSS

CSSスタイルシートまたは<style>ブロックをPython Dashアプリにフィードします。以下の両方を実行しようとしましたが、どちらも機能しません。アプリは正常に読み込まれます。しかし、テキストは緑ではなく黒のままです。

import dash

from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from flask import send_from_directory



# define the app
app = dash.Dash()

app.head = [html.Link(rel='stylesheet', href='./static/stylesheet.css'),
    ('''
    <style type="text/css">
    h1 {
        color:green;
    }
    </style>
    ''')]

app.layout = html.Div(html.H1('Hello World!'))


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

そして./static/stylesheet.cssの中には、これだけのファイルがあります：

h1{
  color:green;
}

スタイルシートまたは<style>タグのみを使用してみましたが、どちらもh1タグを緑色に変えません。

これが私の問題を解決するために私が行った研究です：

https://github.com/plotly/dash/pull/171

https://dash.plot.ly/external-resources

https://github.com/plotly/dash-recipes/blob/master/dash-local-css-link.py

私が試していない唯一のこと（これらのリンクが示唆していること）は、外部リンク（CDN）からロードすることです。しかし、私はこのアプリをオフラインでロードできるようにしたいので、それはオプションではありません。

pythoncssplotly-dash
5
David Skarbrevik

これは私がやったプロジェクトの一部であり、それはスタイルのために働いた

app.layout = html.Div(
style={'backgroundColor': 'black'},
children=[
    html.H1('html code')])
5
Cooper

GitHubのダッシュレシピ を見ると、ローカルのcssファイルを使用するための構文が表示されます。この作業を行うために変更する必要があったのは、@ app.server.routeだけです。の代わりに：

@app.server.route('/static/<path:path>')

私が使用した：

@app.server.route('/static/<path>')
4
Paul D.

あなたはCSSを提供していません。正しい方法は、次の行をapp.pyに追加することです

app = dash.Dash()
server = app.server
app.config.suppress_callback_exceptions = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

次のflaskコードを使用してcssフォルダーを提供し、それをindex.pyに追加します

@app.server.route('/assests/<path:path>')
def static_file(path):
    static_folder = os.path.join(os.getcwd(), 'assests')
    return send_from_directory(static_folder, path)

これにより、assestsフォルダーの下のすべてが提供されます。次に、css、fontsなどの内部フォルダがあるとします。以下を使用してcssを参照できます。

app.layout = html.Div([
    html.Div([
        dcc.Location(id='url', refresh=False),
        html.Link(
            rel='stylesheet',
            href='/assests/css/bootstrap.css'
        ),
        html.Link(
            rel='stylesheet',
            href='/assests/css/styles.css'
        )
    ]),
    html.Div(id='page-content'),

])
1
Ravi Singh

多分それはあなたがこのCSSを最初に宣言することについてであり、それは<style>タグと競合しています。

0
user871619