如何解决Angular 4中C3.js Y轴标签字体样式修改CSS无效问题？

我之前在Angular项目里折腾C3.js样式的时候也碰到过一模一样的问题，给你几个亲测有效的解决方案：

方案一：用::ng-deep穿透Angular的样式隔离 #

Angular默认会给组件样式加上作用域限制（View Encapsulation），而C3生成的SVG元素是挂载到全局DOM中的，普通的类选择器根本碰不到它。这时候就需要用::ng-deep来强制样式穿透：

::ng-deep .c3-axis-y-label {
  font-weight: bold;
  font-size: 30px;
}

如果还是不生效，可以加个!important来覆盖C3的默认样式（尽量少用，但这里应急没问题）：

::ng-deep .c3-axis-y-label {
  font-weight: bold !important;
  font-size: 30px !important;
}

担心全局污染的话，用:host ::ng-deep限定只在当前组件生效：

:host ::ng-deep .c3-axis-y-label {
  font-weight: bold;
  font-size: 30px;
}

方案二：把样式放到全局样式文件 #

直接把你的CSS代码加到项目根目录的styles.css（或styles.scss）里，全局样式不受Angular的组件封装限制，肯定能匹配到C3的元素：

.c3-axis-y-label {
  font-weight: bold;
  font-size: 30px;
}

这个方法简单粗暴，但要注意别和其他组件的同名样式冲突哦。

方案三：直接通过C3配置设置样式（最推荐） #

其实C3本身就支持在配置里直接定义轴标签的样式，完全不用写CSS，还能避开Angular的样式隔离问题，这才是最靠谱的方式：

const chart = c3.generate({
  // 你的其他图表配置...
  axis: {
    y: {
      label: {
        text: '这里填你的Y轴标签文本',
        style: {
          fontWeight: 'bold',
          fontSize: '30px'
        }
      }
    }
  }
});

为什么原来的CSS不生效？ #

Angular默认的ViewEncapsulation.Emulated模式会给组件内的样式添加唯一的属性选择器（比如[_ngcontent-abc123]），而C3生成的SVG元素不在当前组件的DOM作用域内，所以你的样式根本匹配不到这些元素~

内容的提问来源于stack exchange，提问作者Hunter D