Question

我需要设置MakeSelectable（）中包含的MaterialUI.List组件的样式。我想通过使用自定义主题的MUIThemeProvider执行此操作，但如果需要，也可以使用内联样式覆盖。问题是，看起来我无法覆盖任何listItem样式，除非我修改了我的主题的调色板属性的值，这会影响所有 material-ui组件。

这是我的主题文件：

import * as colors from 'material-ui/styles/colors';
import vstColors from './vst-colors.js.es6';
import spacing from 'material-ui/styles/spacing';
import zIndex from 'material-ui/styles/zIndex';
import { fade } from 'material-ui/utils/colorManipulator';
let { tints } = vstColors;
const BLMTheme = {
    spacing: spacing,
    zIndex: zIndex,
    fontFamily: 'Roboto, sans-serif',
    palette: {
        primary1Color: colors.blue800,
        primary2Color: colors.lightBlue800,
        primary3Color: colors.lightBlack,
        accent1Color: colors.orange200,
        accent2Color: colors.grey100,
        accent3Color: colors.grey500,
        textColor: colors.white,
        alternateTextColor: colors.white,
        canvasColor: colors.white,
        borderColor: colors.grey300,
        disabledColor: fade(colors.darkBlack, 0.3),
        pickerHeaderColor: colors.cyan500
    },
    tabs: {
        backgroundColor: colors.grey300,
        selectedTextColor: colors.grey50,
        textColor: colors.grey700
    }
};

export default BLMTheme;

这是我的SelectableList组件

import BooklistItemsAPI from '../../api/booklistItemsAPI.js.es6';
import BooklistHelper from '../../helpers/booklistHelper.js.es6';
import vstColors from '../../helpers/vst-colors.js.es6';
import constants from '../../helpers/constants.js.es6';
import Time from 'react-time';
import { default as NewBooklistDialog } from '../booklists/addEdit/NewBooklistDialog.es6.jsx';

/** Redux Store Actions */
import { setBooklistDetailAlert } from '../../stores/actions/alertActions.js.es6';
import { setBooklistDetailPager } from '../../stores/actions/pagerActions.js.es6';
import {
    setBooklistItems,
    toggleSelectAllState,
    setNavigationIndex,
    setFilter,
    deleteFilter
} from '../../stores/actions/booklistActions.js.es6';

let SelectableList = MaterialUI.MakeSelectable(MaterialUI.List);
let { count, status, resource } = constants;
let { colors, tints } = vstColors;

function wrapState(ListComponent){

    class SelectableList extends React.Component {
        constructor(props){
            super(props);
            this.state = {};
            this._onSelect = this._onSelect.bind(this);
        }

        componentWillMount(){
            this.setState({
                selectedIndex: this.props.defaultValue
            });
        }

        _onSelect(e, index){
            let { counts, filters, pager, batchActions } = this.props;
            let _status = e.currentTarget.dataset.status || null,
                _itemCount = BooklistHelper.getCountsByStatus(counts, _status);

            this.setState({
                selectedIndex: index
            });

            batchActions(
                [
                    setBooklistDetailAlert(true, 'Loading Titles...'),
                    setFilter('page', 1),
                    setBooklistDetailPager(1, pager.size, _itemCount),
                    setNavigationIndex(index),
                    (() => {
                        return (_status === null) ?
                            deleteFilter('status') : setFilter('status', _status);
                    })()
                ]
            );

            setTimeout(()=>{
                BooklistItemsAPI
                    .getBooklistItems(BLM.currentContext.booklistId, filters)
                    .then(response => {
                        batchActions(
                            [
                                setBooklistItems(response),
                                toggleSelectAllState(),
                                setBooklistDetailAlert(false, '')
                            ]
                        );
                    });
            }, 50);
        }

        render(){
            let { children } = this.props;
            return (
                <ListComponent
                    value={ this.state.selectedIndex }
                    onChange={ this._onSelect }>
                    { children }
                </ListComponent>
            );
        }
    }

    return SelectableList;
}

export const StatefulList = wrapState(SelectableList);

const BooklistDetail_NavPanel = class BooklistDetail_NavPanel extends React.Component {
    constructor(props){
        super(props);
    }

    render(){
        let { booklist, counts, company } = this.props;
        let _listItemStyles = {
            color: tints.CLOUD_1,
            backgroundColor: tints.CLOUD_6
        };

        return (
            <section className="blm-booklist-nav__container">
                <header className="blm-booklist-nav__header">
                    <div className="row">
                        <div className="col-md-12 text-center">
                            <h5 className="vst-color--sangria">
                                { ((company && company.name) || '') }
                            </h5>
                            <h1>
                                { booklist.name }
                            </h1>
                            <p className="blm-booklist-nav__last-updated">
                                last updated&nbsp;
                                <Time value={ booklist.updated_at } format="MM/DD/YY" />
                            </p>
                        </div>
                    </div>
                    <div className="btn-group-xs text-center blm-booklist-nav__header-links">
                        <NewBooklistDialog create={ false }
                                           title={ "Add Items to: " + booklist.name }
                                           buttonStyle="link"
                                           buttonSize="small"
                                           { ...this.props }
                        />
                        <a title={ "Export " + booklist.name } href={ "/booklists/" + booklist.id + "/export"} className="btn btn-link blm-booklist__icon-link">
                            <i className="blm-icon--circle-export" />
                        </a>
                    </div>
                </header>
                <section className="blm-booklist-nav__selectable-list-container">
                    <StatefulList className="blm-booklist-nav__selectable-list" defaultValue={1} { ...this.props }>
                        <MaterialUI.ListItem data-blm-id="blmNavPanelStatus_TOTAL"
                                             className="blm-booklist-nav__selectable-list__item"
                                             primaryText={'All Books (' + counts['TOTAL'] + ')'}
                                             value={1}
                                             style={_listItemStyles}
                        />
                        <MaterialUI.ListItem data-blm-id="blmNavPanelStatus_NEEDSATTENTION"
                                             className="blm-booklist-nav__selectable-list__item"
                                             primaryText={'Needs Attention (' + counts[status.NEEDS_ATTENTION] + ')'}
                                             value={2}
                                             data-status={ status.NEEDS_ATTENTION }
                                             initiallyOpen={true}
                                             autoGenerateNestedIndicator={false}
                                             nestedItems={[
                                            <MaterialUI.ListItem data-blm-id="blmNavPanelStatus_ADDRIGHTS"
                                                                 className="blm-booklist-nav__selectable-list__item"
                                                                 value={3}
                                                                 primaryText={ 'Adopt (' + counts[status.ADD_RIGHTS] + ')'}
                                                                 data-status={ status.ADD_RIGHTS } />,
                                            <MaterialUI.ListItem data-blm-id="blmNavPanelStatus_REQUESTRIGHTS"
                                                                 className="blm-booklist-nav__selectable-list__item"
                                                                 value={4}
                                                                 primaryText={ 'Request Rights (' + counts[status.REQUEST_RIGHTS] + ')'}
                                                                 data-status={ status.REQUEST_RIGHTS } />,
                                            <MaterialUI.ListItem data-blm-id="blmNavPanelStatus_UNAVAILABLE"
                                                                 className="blm-booklist-nav__selectable-list__item"
                                                                 value={5}
                                                                 primaryText={ 'Unavailable (' + counts[status.UNAVAILABLE] + ')'}
                                                                 data-status={ status.UNAVAILABLE } />,
                                            <MaterialUI.ListItem data-blm-id="blmNavPanelStatus_FULFILLMENT"
                                                                 className="blm-booklist-nav__selectable-list__item"
                                                                 value={6}
                                                                 primaryText={ 'Fulfillment (' + counts[status.FULFILLMENT] + ')'}
                                                                 data-status={ status.FULFILLMENT } />
                                         ]}
                        />
                        <MaterialUI.ListItem data-blm-id="blmNavPanelStatus_AVAILABLE"
                                             className="blm-booklist-nav__selectable-list__item"
                                             primaryText={'Available (' + counts[status.AVAILABLE] + ')'}
                                             value={7}
                                             data-status={ status.AVAILABLE } />
                        <MaterialUI.ListItem data-blm-id="blmNavPanelStatus_REQUESTED"
                                             className="blm-booklist-nav__selectable-list__item"
                                             primaryText={'Submitted Requests (' + counts[status.REQUESTED] + ')'}
                                             value={8}
                                             data-status={ status.REQUESTED } />
                        <MaterialUI.ListItem data-blm-id="blmNavPanelStatus_DENIED"
                                             className="blm-booklist-nav__selectable-list__item"
                                             primaryText={'Denied Requests (' + counts[status.DENIED] + ')'}
                                             value={9}
                                             data-status={ status.DENIED } />
                    </StatefulList>
                </section>
            </section>
        );
    }
};

BLM.components.BooklistDetail_NavPanel = BooklistDetail_NavPanel;
export default BooklistDetail_NavPanel;

我已尝试添加（仅作为测试）

listItem: {
    textColor: '#ffffff',
    backgroundColor: '#505050'
}

到我的BLMTheme，但这没有影响。如果我使用内联：

style={{ color: '#ffffff', backgroundColor: '#505050' }}

文本颜色设置正确，但backgroundColor没有。在所有关于主题和定制的材料文档中，甚至在github上查看listItem的源代码，通过BLMTheme或内联{style}来传递哪些样式并不是很明显。属性，并将它们应用于listItem。

所以，问题是......你究竟如何设计这个组件，并在应用程序中将独立的样式设置为其他可选列表组件？

修改

我应该注意，我知道我可以使用.sass文件中的！imporant 来覆盖内联样式。但是，例如，这并不允许我更改listItem的：selected状态的样式。我真正想要的是一个地图，其中muiTheme的属性对应于ListItem组件的默认textColor，backgroundColor，hoverColor，selectedColor等。 material-ui.com网站上没有提供此信息的文档。

Answer 1

我意识到你可能已经为此找到了解决方案，但是......

基本上，每个material-ui组件都有一个键，您可以使用该键来覆盖您正在寻找的编程方法中所述组件的样式。在你的情况下，它将是

list: { //custom style overrides here }

您可以阅读更多here

更具体地说是

至于地图，我很抱歉地说我不知道一个，但如果您只是阅读了您试图覆盖的组件的源代码，您将看到您需要的内容放入样式覆盖。

您可以查看组件here：

https://github.com/callemall/material-ui/tree/master/src

Answer 2

listItem: {
    textColor: '#ffffff !important',
    backgroundColor: '#505050 !important'
}

这应该解决我认为的问题

需要帮助设置材料的样式 - ui可选列表组件

这是我的主题文件：

这是我的SelectableList组件

修改

2 个答案: