theme css style sequence

本文解析了不同样式设置之间的优先级顺序:主题样式优先于原始控制属性;原始控制属性优先于样式表主题;样式表主题优先于 CSS 样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

The sequence is:

1. Theme has higher precedence than original control attributes.

2. Original control attributes has higher precedence than styleSheetTheme.

3. styleSheetTheme has higher precedence than css.

 

http://forums.asp.net/p/1111450/1712315.aspx#1712315

 
<!-- MermaidFlowchart.vue --> <template> <div class="mermaid-container"> <div ref="chartContainer" @click="handleDiagramClick"></div> </div> </template> <script setup lang="ts"> import { ref, onMounted, watch } from 'vue'; import mermaid from 'mermaid'; const props = defineProps({ chartCode: { type: String, required: true, }, id: { type: String, required: true, }, }); const emit = defineEmits(['clickNode']); const chartContainer = ref<any>(null); // 更新节点样式 const updateNodeStyles = () => { const nodes = chartContainer.value.querySelectorAll('.clickable'); nodes.forEach((node: any) => { node.querySelector('rect').style.fill = '#eeeeee'; node.querySelector('.nodeLabel').style.color = '#000000'; }); }; const handleDiagramClick = (e: any) => { const target = e.target.closest('.clickable'); if (target) { const id = target.id.split('-')[1]; updateNodeStyles(); target.querySelector('rect').style.fill = '#165DFF'; target.querySelector('.nodeLabel').style.color = '#FFF'; emit('clickNode', id); } }; // Mermaid 初始化配置 mermaid.initialize({ startOnLoad: false, securityLevel: 'loose', theme: 'neutral', themeVariables: { fontSize: '12px', // 固定字体大小 // primaryColor: '#fff', // 节点颜色 // nodeBorder: '#000', // edgeLabelBackground: '#fff', }, flowchart: { htmlLabels: false, // 禁用自动调整标签大小 curve: 'linear', useMaxWidth: false, // 关闭最大宽度限制 }, }); const renderChart = async () => { try { const { svg } = await mermaid.render( props.id || 'mermaid-chart', props.chartCode ); chartContainer.value.innerHTML = svg; } catch (err) { window.console.error('Mermaid 渲染错误:', err); } }; onMounted(() => { renderChart(); }); watch( () => props.chartCode, () => { renderChart(); } ); </script> <style scoped> .mermaid-container { width: 100%; height: 100%; background: white; padding: 20px; border-radius: 8px; overflow: auto; box-sizing: border-box; } </style> 这是我的组件内容,如何修改
06-07
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值