Компоненты пользовательского интерфейса материала для укладки

Question

Не совсем проблема, но я чем-то недоволен. Я использую react + typescript + css modules + https://material -ui-next.com / . Проблема в том, что когда мне нужно стилизовать компоненты пользовательского интерфейса, мне приходится много использовать !important. Вопрос в том, есть ли способ создавать стили без important. Я создаю пример проекта для воспроизведения проблемы https://github.com/halkar/test-css-modules

Answer 1

Material-UI выставляет многие из своих компонентов для укладки. Есть два способа сделать это.

Глобальное применение стилей

Вы можете стилизовать компоненты глобально и применить их к теме. Примером этого может быть что-то вроде этого (скопировано из документации http://www.material -ui.com / # / customization / themes ):

import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';

// This replaces the textColor value on the palette
// and then update the keys for each component that depends on it.
// More on Colors: http://www.material-ui.com/#/customization/colors
const muiTheme = getMuiTheme({
  palette: {
    textColor: cyan500,
  },
  appBar: {
    height: 50,
  },
});

class Main extends React.Component {
  render() {
    // MuiThemeProvider takes the theme as a property and passed it down the hierarchy
    // using React's context feature.
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <AppBar title="My AppBar" />
      </MuiThemeProvider>
    );
  }
}

export default Main;

Как вы можете видеть здесь, компонент appBar имеет высоту 50px, что означает, что каждый раз, когда вы добавляете компонент appbar в свое приложение вниз по дереву, к которому вы применили muiTheme, он будет иметь высоту 50px. Это список всех стилей, которые вы можете применять для каждого компонента https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js.

Применение стилей с использованием атрибута style

Чтобы применить стили к отдельным компонентам, вы обычно можете использовать свойство style и передавать ему нужные вам стили.

Это еще один пример из документов, где к RaisedButton применяется поле в 12px.

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = {
  margin: 12,
};

const RaisedButtonExampleSimple = () => (
  <div>
    <RaisedButton label="Default" style={style} />
    <RaisedButton label="Primary" primary={true} style={style} />
    <RaisedButton label="Secondary" secondary={true} style={style} />
    <RaisedButton label="Disabled" disabled={true} style={style} />
    <br />
    <br />
    <RaisedButton label="Full width" fullWidth={true} />
  </div>
);

export default RaisedButtonExampleSimple;

Теперь стили определены в одном и том же файле, но вы можете определить их в отдельном файле и импортировать их в файл, в котором вы используете компоненты.

Если вы хотите применить несколько стилей, вы можете использовать оператор распространения следующим образом: style={{...style1,...style2}}.

Обычно вы стилизуете конкретную вещь в компоненте (корневой элемент) с помощью свойства style, но некоторые компоненты имеют более одного свойства для стилизации различных элементов компонента. В свойствах на этой странице http://www.material -ui.com / # / компоненты / поднял-кнопка , вы можете видеть, что есть свойство стиля, labelStyle и rippleStyle для стиля различных частей RaisedButton.

Проверьте свойства компонента, который вы используете, и посмотрите, какое свойство стиля вы можете использовать, в противном случае проверьте доступные глобальные свойства стиля, которые вы можете переопределить. Надеюсь, это поможет!

Answer 2

Я должен был использовать JssProvider и сказать ему, чтобы поместить стили пользовательского интерфейса перед моим в разделе head.

import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';

const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
jss.options.insertionPoint = document.getElementById('jss-insertion-point');

function App() {
  return (
    <JssProvider jss={jss} generateClassName={generateClassName}>
      ...
    </JssProvider>
  );
}

export default App;

Answer 3

Вы должны использовать API компонента. Вы не можете установить стиль для компонентов, импортируемых из библиотек, только с помощью css, если у компонента есть API для получения стиля.

* Обновление

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
  },
  label: {
    textTransform: 'capitalize',
  },
};

function Classes(props) {
  return (
    <Button
      classes={{
        root: props.classes.root, // class name, e.g. `classes-root-x`
        label: props.classes.label, // class name, e.g. `classes-label-x`
      }}
    >
      {props.children ? props.children : 'classes'}
    </Button>
  );
}

Classes.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Classes);