我正在尝试构建一组小部件,允许每个客户在其页面上配置样式。
有什么方法可以公开类、id 或允许在客户端修改样式的东西吗?我尝试用 !important
覆盖,但似乎没有用
最佳答案
我将从这里开始。您不需要使用 !important
来覆盖默认样式。您需要检查两件事才能使 CSS 覆盖优雅地工作。
- 覆盖样式表的结构正确。如果您的默认样式表使用
.wrapper > .my-container
定义规则,覆盖不能只为.my-container
定义规则(默认样式是更强的规则并将优先于覆盖样式表)。您必须在覆盖样式表中覆盖相同的类结构。 - 覆盖样式 包含在默认样式表之后。
就如何应用自定义客户端样式而言,假设您希望保存和加载这些样式而不是短暂的,有几个选项。
一个是允许客户自定义变量,例如十六进制值、宽度等。然后您可以将这些 CSS 值存储在数据库中,并为覆盖这些类的客户提供自定义样式表。这里的缺点是客户端可能会存储看起来很糟糕或破坏事物的值,例如白色文本上的白色(需要验证)。
另一个选项是生成一组预设类或“主题”(例如一个类用于紫色,另一个用于黄色,一个用于大尺寸小部件,一个用于小部件等)。然后只需存储客户选择的选项并在前端以编程方式应用它。这不需要相同的验证、提供自定义样式表,也不需要在数据库中存储 CSS 字符串,但会在一定程度上限制客户的选择。
关于jquery - 如何公开 css 以在小部件上进行配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53527608/