前端 - 如何在Vue2的render方法中限制样式作用域？

Question

Vue2的render来编写组件，如下：

// 引入css文件import "./style.css";export default {  name: "customPage",  data() {    return {};  },  methods: {},  render: function (h) {    return <p class="title">Hello render</p>;  },};

现在的问题是它的样式无法设置为局部样式，导致全局样式被污染了，请问该如何解决？

目前没有找到解决办法。

Answer 1

在Vue2中，你可以使用scoped CSS来限制样式的作用域。通过在样式标签中添加scoped属性，可以将样式限定在当前的组件中，而不会影响其他组件。

在你的例子中，你可以将CSS文件中的样式修改为scoped样式，如下所示：

// 引入scoped CSS文件import "./style.css" scoped;export default {  name: "customPage",  data() {    return {};  },  methods: {},  render: function (h) {    return <p class="title">Hello render</p>;  },};

通过添加scoped属性，CSS样式只会应用于当前组件，而不会影响其他组件。这样就可以避免全局样式的污染问题。请注意，如果样式之间存在冲突，可能需要调整选择器或样式规则以解决冲突。