Question

我正在this示例后面实现一个侧边栏，但无法弄清楚如何为每个className应用样式...

这是我尝试过的，但没有应用任何样式......

组件：

import React from 'react';

import styles from '../stylesheets/menu.css';

var Parent = React.createClass({
  getInitialState(){
    return {sidebarOpen: false};
  },
  handleViewSidebar(){
    this.setState({sidebarOpen: !this.state.sidebarOpen});
  },
  render() {
    return (
      <div>
        <Header onClick={this.handleViewSidebar} />
        <SideBar isOpen={this.state.sidebarOpen} toggleSidebar={this.handleViewSidebar} />
        <Content isOpen={this.state.sidebarOpen} />
      </div>
    );
  }
});

var SideBar = React.createClass({
  render() {
    var sidebarClass = this.props.isOpen ? 'sidebar open' : 'sidebar';
    return (
      <div className={sidebarClass}>
        <div>I slide into view</div>
        <div>Me too!</div>
        <div>Meee Threeeee!</div>
        <button onClick={this.props.toggleSidebar} className="sidebar-toggle">Toggle Sidebar</button>
      </div>
    );
  }
});

export default Parent;

样式：

.sidebar {
  position: absolute;
  top: 60px;
}
.sidebar-toggle {
  position: absolute;
  top: 20%;
}
.sidebar.open {
    left: 0;
}

webpack.config：

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'css-loader'
      }
    ]
  }

部分文件夹结构：

客户端
--stylesheets
---- menu.css
--components
---- Sidebar.js

Answer 1

您正在将样式导入为对象：

.error

这可以用于CSS-in-JS，但在你的情况下它不起作用。

尝试将其更改为：

    from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import StringProperty
from kivy.uix.textinput import TextInput
from kivy.uix.checkbox import CheckBox
from kivy.lang import Builder

ROWS = ['Goc', 'COC', 'EEE']

Builder.load_string("""

<Test>:
    do_default_tab: False

    TabbedPanelItem:
        text: 'page1'

        Table:
            padding: 50, 50, 50, 50
            orientation: 'vertical'

<Row>:
    spacing: 50
    #orientation: 'vertical'
    size_hint_x: 1
    txt: txtinpt.text
    Label:
        text: root.txt
    TextInput:
        id: txtinpt
        text: root.txt
        disabled: not CheckBox.active
    CheckBox:
        id:CheckBox 
        text: 'CheckBox'
        active: False
    Button:
        text: 'save'

""")
class Table(BoxLayout):
    def __init__(self, **kwargs):
        super(Table, self).__init__(**kwargs)
        for row in ROWS:
            self.add_widget(Row(row))



class Row(BoxLayout):
    txt = StringProperty()
    def __init__(self, row, **kwargs):
        super(Row, self).__init__(**kwargs)
        self.txt = row



class Test(TabbedPanel):
    pass

class MyApp(App):

    def build(self):
        test = Test()
        return test


if __name__ == '__main__':
    MyApp().run()

它应该正确应用样式。

按类名反应样式

1 个答案: