<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto"><code class="notranslate">&lt;CircularProgress&gt;</code> is most often used as a loading spinner.  I usually find it most convenient to style my loading spinners to be sized relative to the text, for example <code class="notranslate">1.2em</code> diameter, so that I don't have to waste time styling each particular usage.  But currently <code class="notranslate">&lt;CircularProgress&gt;</code> only supports a fixed pixel size.</p>
<p dir="auto">So would you be willing to make the API (or accept a PR to) support any valid CSS length value (as a string)?</p>
<p dir="auto">When passing a style rules callback or object <code class="notranslate">withStyles()</code> hoc does not raise a type error if the rules contain invalid CSS properties.</p>

<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">There should be a type error if the styles object contains non-CSS properties.</p>
<p dir="auto">Note the property <code class="notranslate">styles.root.foo</code> in the code below is not a valid CSS property, but it compiles just fine.</p>
<p dir="auto">I don't know if this is a problem in the typings, typescript itself, or the way I am doing things. Or perhaps this is not expected to be caught at compile time?</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">The code compiles. This means one will easily fail to catch a mis-spelled CSS property.</p>
<h2 dir="auto">The Code</h2>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import { withStyles, WithStyles, StyleRulesCallback } from 'material-ui/styles';

const drawerWidth = 240;

type ClassNames =
	| 'root'
	| 'content';

const styles: StyleRulesCallback&lt;ClassNames&gt; = theme =&gt; ({
	root: {
		width: '100%',
		height: 430,
		marginTop: theme.spacing.unit * 3,
		foo: 0, // I expected this to cause a compile error
	},
	content: {
		backgroundColor: theme.palette.background.default,
		width: '100%',
		padding: theme.spacing.unit * 3,
	},
});

export type Props = WithStyles&lt;ClassNames&gt;;

class App extends React.Component&lt;Props&gt; {

	render() {
		const { classes, theme } = this.props;

		return (
			&lt;div className={classes.root}&gt;
				&lt;main className={classes.content}&gt;
					Hello World
				&lt;/main&gt;
			&lt;/div&gt;
		);
	}
}

export default withStyles(styles)&lt;{}&gt;(App);
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">withStyles</span><span class="pl-kos">,</span> <span class="pl-smi">WithStyles</span><span class="pl-kos">,</span> <span class="pl-smi">StyleRulesCallback</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">const</span> <span class="pl-s1">drawerWidth</span> <span class="pl-c1">=</span> <span class="pl-c1">240</span><span class="pl-kos">;</span>

<span class="pl-k">type</span> <span class="pl-smi">ClassNames</span> <span class="pl-c1">=</span>
	<span class="pl-c1">|</span> <span class="pl-s">'root'</span>
	<span class="pl-c1">|</span> <span class="pl-s">'content'</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-en">styles</span>: <span class="pl-smi">StyleRulesCallback</span><span class="pl-kos">&lt;</span><span class="pl-smi">ClassNames</span><span class="pl-kos">&gt;</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">root</span>: <span class="pl-kos">{</span>
		<span class="pl-c1">width</span>: <span class="pl-s">'100%'</span><span class="pl-kos">,</span>
		<span class="pl-c1">height</span>: <span class="pl-c1">430</span><span class="pl-kos">,</span>
		<span class="pl-c1">marginTop</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">*</span> <span class="pl-c1">3</span><span class="pl-kos">,</span>
		<span class="pl-c1">foo</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c">// I expected this to cause a compile error</span>
	<span class="pl-kos">}</span><span class="pl-kos">,</span>
	<span class="pl-c1">content</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">background</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">,</span>
		<span class="pl-c1">width</span>: <span class="pl-s">'100%'</span><span class="pl-kos">,</span>
		<span class="pl-c1">padding</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">*</span> <span class="pl-c1">3</span><span class="pl-kos">,</span>
	<span class="pl-kos">}</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">type</span> <span class="pl-smi">Props</span> <span class="pl-c1">=</span> <span class="pl-smi">WithStyles</span><span class="pl-kos">&lt;</span><span class="pl-smi">ClassNames</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span>

<span class="pl-k">class</span> <span class="pl-smi">App</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">Props</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>

	<span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
		<span class="pl-k">const</span> <span class="pl-kos">{</span> classes<span class="pl-kos">,</span> theme <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">;</span>

		<span class="pl-k">return</span> <span class="pl-kos">(</span>
			<span class="pl-c1">&lt;</span><span class="pl-s1">div</span> <span class="pl-smi">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">classes</span><span class="pl-kos">.</span><span class="pl-s1">root</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
				<span class="pl-c1">&lt;</span><span class="pl-s1">main</span> <span class="pl-smi">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">classes</span><span class="pl-kos">.</span><span class="pl-s1">content</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
					<span class="pl-smi">Hello</span> <span class="pl-smi">World</span>
				<span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>main&gt;</span>
<span class="pl-pds">			<span class="pl-c1">&lt;</span><span class="pl-c1">/</span>div</span><span class="pl-c1">&gt;</span><span class="pl-s1"></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-en">withStyles</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">)</span><span class="pl-kos">&lt;</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">&gt;</span><span class="pl-kos">(</span><span class="pl-smi">App</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">Looking at the definition of <code class="notranslate">StyleRules</code>, it appears to be attempting to enforce that values in the <code class="notranslate">StyleRules</code> record should be a subset of <code class="notranslate">React.CSSProperties</code>.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export type StyleRules&lt;ClassKey extends string = string&gt; = Record&lt;ClassKey, Partial&lt;React.CSSProperties&gt;&gt;;"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">type</span> <span class="pl-smi">StyleRules</span><span class="pl-c1">&lt;</span><span class="pl-smi">ClassKey</span> <span class="pl-k">extends</span> <span class="pl-smi">string</span> <span class="pl-c1">=</span> <span class="pl-smi">string</span><span class="pl-c1">&gt;</span> <span class="pl-c1">=</span> <span class="pl-smi">Record</span><span class="pl-kos">&lt;</span><span class="pl-smi">ClassKey</span><span class="pl-kos">,</span> <span class="pl-smi">Partial</span><span class="pl-kos">&lt;</span><span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">CSSProperties</span><span class="pl-kos">&gt;</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">If I use a style rules object instead of a callback the result is the same.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.16</td>
</tr>
<tr>
<td>React</td>
<td>16.0.10</td>
</tr>
<tr>
<td>browser</td>
<td>61.0.3163.100</td>
</tr>
<tr>
<td>Typescript</td>
<td>2.5.2</td>
</tr>
</tbody>
</table>