Извлечение стилей из материала ui component

AppBar применяет некоторые стили для детей определенных типов. К сожалению, это происходит только прямые детиИзвлечение стилей из материала ui component

<AppBar title="first" iconElementRight={ 
    <FlatButton label="first" /> 
}/> 
<AppBar title="second" iconElementRight={ 
    <div> 
     <FlatButton label="second" /> <!-- styles are not applied --> 
    </div> 
}/>

jsfiddle

Надеюсь, похоже AppBar компонент предоставляет метод getStyles.

exports.getStyles = getStyles;

К сожалению, я не могу понять, как его использовать. Есть ли способ сделать это, а не переопределять все стили самостоятельно?

PS Я импортировать компоненты в директиве импорта

import AppBar from 'material-ui/AppBar';

источник

2016-08-04 Stas Kurilin

Что вы хотите достичь? Получите стили из AppBar и переопределите цвет '' text color? Или просто получить стили из AppBar? – QoP

@QoP: Я хочу сделать FlatButton и некоторые IconMenu, которые я ставил там, как они были указаны как прямые дети iconElementRight. Для этого я планирую получать стили из AppBar и переопределять его для своих элементов (это должно быть о цвете и позиции). –

MuiThemeProvider добавляет muiTheme объекта к контексту, так что вы можете получить все стили оттуда.

Comp.contextTypes = { 
    muiTheme: React.PropTypes.object 
} 

render: function() { 
     let {appBar} = this.context.muiTheme; // appBar styles here 
     ... 
}

jsfiddle

источник

2016-08-04 17:33:11 QoP

Спасибо. Я думаю, что это лучше, чем цвет жесткого кода в собственном компоненте. Однако было бы неплохо получить точный стиль с https://github.com/callemall/material-ui/blob/master/src/AppBar/AppBar.js#L55, тогда мне было бы не нужно делать то же самое для другие свойства +, это было бы автоматизировано при изменениях AppBar. Также кажется, что функция getStyles экспортируется. Вы думаете, что есть способ назвать это каким-то образом? –

Я не думаю, что это возможно, похоже на «внутреннюю» функцию. Вы можете попробовать импортировать его с помощью 'import {getStyles} из 'material-ui/AppBar/AppBar'' и вызвать его с помощью getStyles (this.props, this.context), но не уверен, что он сработает. – QoP

Похоже, вам нужен пользовательский компонент для перенаправления стилей к нужному ребенку. Эта версия только перенаправляет style ребенку, а остальное остается на компоненте упаковки (по умолчанию <div>), но может быть настроен под ваши требования.

 const StyleDelegate = function (props) { 
 
    const {component: Component, children, style, ...rest} = props; 
 
    // pass style to the only child and everything else to the component 
 
    // could be further customized for other props 
 
    return (
 
     <Component {...rest}> 
 
      {React.cloneElement(children, {style})} 
 
     </Component> 
 
); 
 
}; 
 

 
StyleDelegate.defaultProps = { 
 
    component: 'div' 
 
}; 
 

 
const AppBar = function (props) { 
 
    return (
 
    <div> 
 
     {props.title} 
 
     {React.cloneElement(props.iconElementRight, {style: {color: 'blue'}})} 
 
    </div> 
 
); 
 
} 
 
    
 
ReactDOM.render(<AppBar 
 
        iconElementRight={<StyleDelegate><span>Icon</span></StyleDelegate>} 
 
        title="title" />, 
 
       document.querySelector('#app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

источник

2016-08-04 17:55:49 ryanjduffy

Извлечение стилей из материала ui component

ответ

Смежные вопросы