JSS допросы - PullRequest
Новая
       24

JSS допросы

0 голосов
/ 28 мая 2018

Я использую CSS в JS (JSS) с material-ui, он отлично работает, но я не понимаю, что он должен предложить (больше, чем внедрение стиля) с точки зрения возможностей / средств кодирования.Я чувствую, что что-то упускаю, поэтому у меня есть некоторые конкретные вопросы.

С внедрением стиля я могу адаптировать стиль к контексту, например: 

const buttonStyle = {
  border: "2px solid black »,
  borderRadius: "5px",
  padding: "15px",
  font-family: "15px",
  font-size: "2em",
  backbroundColor: "red"
};

if (success) {
  buttonStyle.backgroundColor = "green";
}

С помощью JSS этоПохоже, мне нужно "предварительно собрать" весь стиль кнопки в разных возможных цветах: 

const style = {
  buttonSuccess: {
    border: "2px solid black »,
    borderRadius: "5px",
    padding: "15px",
    font-family: "15px",
    font-size: "2em",
    backbroundColor: « green »
  }, 
  buttonError: {
    border: "2px solid black",
    borderRadius: "5px",
    padding: "15px",
    font-family: "15px",
    font-size: "2em",
    backbroundColor: "red"
  }
};

Есть ли способ избежать переписывания всего стиля, когда динамический только один параметр?

И еще один момент, с JSS, похоже, что нам нужно внедрить один класс для каждого html-элемента, который нам нужно стилизовать.

Так что, если у меня есть таблица с 200 ячейками, я должендобавить 200 классов в мой DOM (когда я мог объявить это только один раз с помощью селектора td в чистом CSS)?

Есть ли способ работать со стилем наследования между родительскими и дочерними компонентами?Поскольку существует грязный шаблон, я написал несколько раз, чтобы объединить стиль, который я внедряю из родителя, и стиль, который дети компилируют самостоятельно: 

const styles = theme => ({
  root: {
    backgroundColor: "blue"
  }
});

const childComponent = (props) => (
  <div classeName={`${props.parentClass} ${props.classes}`} /> // See parentClass here
);

export default withStyles(styles)(childComponent);

1 Ответ

0 голосов
/ 28 мая 2018

Есть ли способ избежать переписывания всего стиля, когда только один параметр является динамическим?

Да, см. Значения функций.http://cssinjs.org/json-api?v=v9.8.1#function-values

Итак, если у меня есть таблица с 200 ячейками, я должен добавить 200 классов в свой DOM (когда я мог бы объявить это только один раз с помощью селектора td в чистом CSS)?

Вы можете использовать селектор '& td', см. Jss-вложенный плагин, он уже встроен.

http://cssinjs.org/jss-nested?v=v6.0.1

Есть лиспособ работы со стилем наследования между родительскими и дочерними компонентами?

JSS не изменяет модель наследования CSS.Я думаю, что вы пытаетесь переопределить свойство, которое определяется ядром.Ознакомьтесь с документацией по настройке https://material -ui.com / customization / overrides /

...