{"id":254,"date":"2019-07-25T02:02:28","dateGmt":"2019-07-24T23:02:28","guid":{"rendered":"http://wordpress.loc/?p=254"},"modified":"2019-08-25T05:27:23","modifiedGmt":"2019-08-25T02:27:23","slug":"%d0%bf%d0%be%d0%b4%d0%ba%d0%bb%d1%8e%d1%87%d0%b8%d1%82%d1%8c-%d1%81%d0%b2%d0%be%d0%b8-%d1%81%d1%82%d0%b8%d0%bb%d0%b8-css","status":"publish","type":"post","link":"http://wordpress.loc/?p=254","title":"Подключить свои стили css.","excerpt":"<p>Сначала импортировать функцию withStyles, которая будет добавлять в props классы переданных стилей. Подключить свои стили создав объект классов с ключами нужного элемента и произвольным названием, а также объект стилей, в котором ключи являются значениями объекта классов. Затем в методе render создать классы , где ключами будут соответствующие названию элемента без префикса Wp . Экспортировать класс [&hellip;]</p>\n","excerptProtected":false,"content":"\n<blockquote class=\"wp-block-quote\"><p>Сначала импортировать функцию <code>withStyles</code>, которая будет добавлять в <code>props</code> классы переданных стилей. Подключить свои стили создав <strong>объект классов</strong> с <em>ключами нужного элемента</em> и произвольным названием, а также<strong> объект стилей</strong>, в котором ключи являются значениями объекта классов. Затем в методе <code>render</code> создать классы , где <em><strong>ключами</strong></em> будут соответствующие названию элемента без префикса <strong><em>W</em>p </strong>. Экспортировать класс через <code>withStyles</code>.</p><cite>Добавляет атрибуту <code>className</code> переданного элемента созданое через хук имя класса и снабжает его стилями переданными в <code>withStyles</code>. </cite></blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { Component } from 'react';\nimport { WpDecorator } from 'reactlibrary';\n// withStyles \nimport { withStyles } from '@material-ui/core/styles';\n\n// classesObject\nconst useClasses = {\n  decorator: 'dsaa343',\n  navbar: 'gfgfh2',\n  breadcrumbs: 'fdf34353434sdfd'\n}\n\n// styles object\nconst styles = {\n  [ useClasses.decorator ]: {\n    //color: \"yellow\"\n  },\n  [ useClasses.navbar ]: {\n    //height: \"500px\"\n  },\n  [ useClasses.breadcrumbs ]: {\n    //height: \"500px\"\n  }\n  // ...\n};\n\n\nclass App extends Component {\n\n  constructor(props) {\n    super(props);\n    this.props = props;\n  }\n  render () {\n\n    const propClasses = this.props.classes;\n    // classes\n    const classes = {\n      decorator: propClasses[ useClasses.decorator ],\n      navbar: propClasses[ useClasses.navbar ],\n      breadcrumbs: propClasses[ useClasses.breadcrumbs ]\n      // ...\n    };\n    return (\n      &lt;WpDecorator classes={ classes } />\n    );\n  }\n}\n\n// withStyles\nexport default withStyles(styles)(App)</code></pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Таким образом мы только пытаемся менять свойства. </p><cite>но управление темой createMuiTheme планируется только в следующей версии.</cite></blockquote>\n","contentProtected":false,"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/posts/254"}],"collection":[{"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/posts"}],"about":[{"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/types/post"}],"author":[{"embeddable":true,"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/users/1"}],"replies":[{"embeddable":true,"href":"http://wordpress.loc/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=254"}],"version-history":[{"count":3,"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/posts/254/revisions"}],"predecessor-version":[{"id":277,"href":"http://wordpress.loc/index.php?rest_route=/wp/v2/posts/254/revisions/277"}],"wp:attachment":[{"href":"http://wordpress.loc/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http://wordpress.loc/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=254"},{"taxonomy":"post_tag","embeddable":true,"href":"http://wordpress.loc/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=254"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]},"error":0,"sticky":false,"format":"standard","tags":[],"categories":[18]}