mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
31 lines
606 B
Markdown
31 lines
606 B
Markdown
|
# Use Themed Style
|
||
|
|
Some of components has `themed-style` prop to help you simply modify the style of outer element's style of a component. For some simple components it could be very useful.
|
||
|
|
```html
|
||
|
|
<n-icon
|
||
|
|
size="40"
|
||
|
|
:themed-style="{
|
||
|
|
dark: {
|
||
|
|
fill: 'yellow'
|
||
|
|
},
|
||
|
|
light: {
|
||
|
|
fill: 'red'
|
||
|
|
}
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<md-cash />
|
||
|
|
</n-icon>
|
||
|
|
```
|
||
|
|
```js
|
||
|
|
import mdCash from 'naive-ui/lib/icons/md-cash'
|
||
|
|
import mdContacts from 'naive-ui/lib/icons/md-contacts'
|
||
|
|
import iosContacts from 'naive-ui/lib/icons/ios-contacts'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
mdCash,
|
||
|
|
mdContacts,
|
||
|
|
iosContacts
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|