<p dir="auto">Currently, I developing a component that requires both props and themes object.</p>
<p dir="auto">At first, it works great with theme object</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const styles = theme =&gt; ({
  title: {
    ...theme.typography.headline,
    textAlign: 'center',
    padding: '8px 16px',
    margin: 0,
    color: theme.palette.common.white,
    backgroundColor: theme.palette.primary[500],
  },

withStyles(styles, { withTheme: true })(Component);
...."><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">styles</span> <span class="pl-c1">=</span> <span class="pl-s1">theme</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">title</span>: <span class="pl-kos">{</span>
    ...<span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">typography</span><span class="pl-kos">.</span><span class="pl-c1">headline</span><span class="pl-kos">,</span>
    <span class="pl-c1">textAlign</span>: <span class="pl-s">'center'</span><span class="pl-kos">,</span>
    <span class="pl-c1">padding</span>: <span class="pl-s">'8px 16px'</span><span class="pl-kos">,</span>
    <span class="pl-c1">margin</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
    <span class="pl-c1">color</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">common</span><span class="pl-kos">.</span><span class="pl-c1">white</span><span class="pl-kos">,</span>
    <span class="pl-c1">backgroundColor</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">primary</span><span class="pl-kos">[</span><span class="pl-c1">500</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

<span class="pl-c1">withStyles</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">withTheme</span>: <span class="pl-s1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">Component</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
...<span class="pl-kos">.</span></pre></div>
<p dir="auto">But I also need access to props in styles object.</p>
<p dir="auto">I tried example but it not working.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
 ....
display: (props) =&gt; props.display
}"><pre class="notranslate"><span class="pl-kos">{</span>
 ...<span class="pl-kos">.</span>
<span class="pl-en">display</span>: <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-c1">=</span><span class="pl-c1">&gt;</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">display</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">I end up combine <code class="notranslate">react-jss</code> and <code class="notranslate">withTheme</code> to do that</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
import { withTheme } from 'material-ui/styles';
import injectSheet from 'react-jss';

function withStyles(styles, Component) {
  return withTheme()(injectSheet(styles)(Component));
}

export default withStyles;

....

const styles = {
  title: {
    display: (props) =&gt; props.display,
    textAlign: 'center',
    padding: '8px 16px',
    margin: 0,
    color: ({ theme }) =&gt; theme.palette.common.white,
    backgroundColor: ({ theme }) =&gt; theme.palette.primary[500],
  },
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">withTheme</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/styles'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">injectSheet</span> <span class="pl-k">from</span> <span class="pl-s">'react-jss'</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">withStyles</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">,</span> <span class="pl-v">Component</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">withTheme</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-en">injectSheet</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">Component</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">withStyles</span><span class="pl-kos">;</span>

...<span class="pl-kos">.</span>

<span class="pl-k">const</span> <span class="pl-s1">styles</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">title</span>: <span class="pl-kos">{</span>
    <span class="pl-en">display</span>: <span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">display</span><span class="pl-kos">,</span>
    <span class="pl-c1">textAlign</span>: <span class="pl-s">'center'</span><span class="pl-kos">,</span>
    <span class="pl-c1">padding</span>: <span class="pl-s">'8px 16px'</span><span class="pl-kos">,</span>
    <span class="pl-c1">margin</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
    <span class="pl-en">color</span>: <span class="pl-kos">(</span><span class="pl-kos">{</span> theme <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">common</span><span class="pl-kos">.</span><span class="pl-c1">white</span><span class="pl-kos">,</span>
    <span class="pl-en">backgroundColor</span>: <span class="pl-kos">(</span><span class="pl-kos">{</span> theme <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">palette</span><span class="pl-kos">.</span><span class="pl-c1">primary</span><span class="pl-kos">[</span><span class="pl-c1">500</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span></pre></div>
<p dir="auto">It works but I really miss</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  title: {
    ...theme.typography.headline,"><pre class="notranslate"><code class="notranslate">  title: {
    ...theme.typography.headline,
</code></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto">When using <code class="notranslate">createStyleSheet</code>, there is no way (at least that i know of) to access the component's props. I think this is important, as sometimes it is wanted to pass sizes, url images, and other stylings as props to the component.</p>
<p dir="auto">Today the only solution to this is to separate these stuff into inline-styles, but as far as i know, material-ui v1 uses <code class="notranslate">jss</code> and <code class="notranslate">react-jss</code>, and those two already gives you the possibility of access the props via functions that receive the props and then return the desired style, like that:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const styles = {
  button: {
    background: props =&gt; props.color
  },
  root: {
    backgroundImage: props =&gt; `url(${props.backgroundImage})`
  }
}

// Reference: https://github.com/cssinjs/react-jss#example"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">styles</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">button</span>: <span class="pl-kos">{</span>
    <span class="pl-en">background</span>: <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">color</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">root</span>: <span class="pl-kos">{</span>
    <span class="pl-en">backgroundImage</span>: <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-s">`url(<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">backgroundImage</span><span class="pl-kos">}</span></span>)`</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-c">// Reference: https://github.com/cssinjs/react-jss#example</span></pre></div>
<p dir="auto">What do you think of implementing something like that on material-ui too?</p>