需要帮助设置材料的样式 - ui可选列表组件
我需要设置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
<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网站上没有提供此信息的文档。
2 个答案:
答案 0 :(得分：1)
我意识到你可能已经为此找到了解决方案，但是......
基本上，每个material-ui组件都有一个键，您可以使用该键来覆盖您正在寻找的编程方法中所述组件的样式。在你的情况下，它将是
list: {
//custom style overrides here
}
您可以阅读更多here
更具体地说是
至于地图，我很抱歉地说我不知道一个，但如果您只是阅读了您试图覆盖的组件的源代码，您将看到您需要的内容放入样式覆盖。
您可以查看组件here：
答案 1 :(得分：0)
listItem: {
textColor: '#ffffff !important',
backgroundColor: '#505050 !important'
}
这应该解决我认为的问题
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？