Palette
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Color
primary.main
secondary.main
error.main
warning.main
info.main
success.main
text.primary
text.secondary
text.disabled
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'primary.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'secondary.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'error.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'warning.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'info.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'success.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'text.primary'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'text.secondary'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'text.disabled'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
Background color
primary.main
secondary.main
error.main
warning.main
info.main
success.main
text.primary
text.secondary
text.disabled
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">bgcolor</span><span class="token operator">:</span> <span class="token string">'primary.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">bgcolor</span><span class="token operator">:</span> <span class="token string">'secondary.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">bgcolor</span><span class="token operator">:</span> <span class="token string">'error.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">bgcolor</span><span class="token operator">:</span> <span class="token string">'warning.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">bgcolor</span><span class="token operator">:</span> <span class="token string">'info.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">bgcolor</span><span class="token operator">:</span> <span class="token string">'success.main'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">bgcolor</span><span class="token operator">:</span> <span class="token string">'text.primary'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">bgcolor</span><span class="token operator">:</span> <span class="token string">'text.secondary'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">bgcolor</span><span class="token operator">:</span> <span class="token string">'text.disabled'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>…
API
<span class="token keyword">import</span> <span class="token punctuation">{</span> palette <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/system'</span><span class="token punctuation">;</span>
| Import name | Prop | CSS property | Theme key |
|---|---|---|---|
color |
color |
color |
palette |
bgcolor |
bgcolor |
backgroundColor |
palette |