更改主题 Epub 书不适用于 Epubjs-rn 包中的某些 Html 标签
Change Theme Epub book Not Work For Some Html Tag In Epubjs-rn Package
我使用包 Epubjs-rn 在我的代码中显示 Epub 书，我想在我的代码中覆盖书的主题，但是一些 HTML 标签不这样做得到样式，我看到 HTML 我的书的来源，我发现如果某些参数定义在样式中没有覆盖，例如在 body 标签背景中没有改变，或者在 li 标签颜色中没有改变，因为那是在 [=25= 中设置的]
任何人都可以帮助我如何更改 Epubjs-rn
中此 HTML 文件的背景
我在 React-native 中的代码：
themes={{
"custom_theme": {
"p": {
"background-color": "purple",
"font-size": "15px"
},
"h1": {
"color": "red",
},
"li": {
"background-color": "yellow",
"color":"red",
},
"body": {
"background": "#ffff00",
}
}
}}
theme="custom_theme"
Epub HTML :
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="Aspose.Words for .NET 16.3.0.0" />
<title></title>
<!--[if gte mso 9]><xml><o:DocumentProperties><o:Revision>0</o:Revision><o:TotalTime>0</o:TotalTime><o:Created>2017-08-02T09:09:18Z</o:Created><o:Pages>0</o:Pages><o:Words>0</o:Words><o:Characters>0</o:Characters><o:Lines>0</o:Lines><o:Paragraphs>0</o:Paragraphs><o:CharactersWithSpaces>0</o:CharactersWithSpaces><o:Version>0.0000</o:Version></o:DocumentProperties></xml><![endif]-->
</head>
<body style="background:#ffffff">
<div>
<h1 id="navPoint_1"
style="margin-top:23.25pt; margin-bottom:6pt; text-indent:18pt; page-break-after:avoid; widows:0; orphans:0; font-size:18pt">
<span style="font-family:'Liberation Sans', sans-serif">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nunc ac faucibus odio. </span></h1>
<p style="margin-top:6pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt"><span
style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif">Vestibulum neque massa, scelerisque sit amet ligula eu,
congue molestie mi. Praesent ut varius sem. Nullam at porttitor arcu, nec lacinia nisi. Ut ac dolor
vitae odio interdum condimentum. </span><span
style="font-family:'DejaVu Sans', sans-serif; font-weight:bold">Vivamus dapibus sodales ex, vitae
malesuada ipsum cursus convallis. Maecenas sed egestas nulla, ac condimentum orci. </span><span
style="font-family:'DejaVu Sans', sans-serif">Mauris diam felis, vulputate ac suscipit et, iaculis non
est. Curabitur semper arcu ac ligula semper, nec luctus nisl blandit. Integer lacinia ante ac libero
lobortis imperdiet. </span><span style="font-family:'DejaVu Sans', sans-serif; font-style:italic">Nullam
mollis convallis ipsum, ac accumsan nunc vehicula vitae. </span><span
style="font-family:'DejaVu Sans', sans-serif">Nulla eget justo in felis tristique fringilla. Morbi sit
amet tortor quis risus auctor condimentum. Morbi in ullamcorper elit. Nulla iaculis tellus sit amet
mauris tempus fringilla.</span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif">Maecenas mauris lectus, lobortis et purus mattis,
blandit dictum tellus.</span></p>
<ul style="margin:0pt; padding-left:0pt">
<li
style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<span style="font-family:'DejaVu Sans', sans-serif; font-weight:bold">Maecenas non lorem quis tellus
placerat varius. </span></li>
<li
style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<span style="font-family:'DejaVu Sans', sans-serif; font-style:italic">Nulla facilisi. </span></li>
<li
style="margin-top:11.25pt; margin-left:28.52pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:7.48pt; font-family:serif; font-size:12pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<span style="font-family:'DejaVu Sans', sans-serif; font-size:10.5pt; text-decoration:underline">Aenean
congue fringilla justo ut aliquam. </span></li>
<li
style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<a href="https://products.office.com/en-us/word" style="text-decoration:none"><span
style="font-family:'DejaVu Sans', sans-serif; text-decoration:underline; color:#000000">Mauris
id ex erat. </span></a><span style="font-family:'DejaVu Sans', sans-serif">Nunc vulputate neque
vitae justo facilisis, non condimentum ante sagittis. </span></li>
<li
style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<span style="font-family:'DejaVu Sans', sans-serif">Morbi viverra semper lorem nec molestie. </span>
</li>
<li
style="margin-top:11.25pt; margin-left:28.52pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:7.48pt; font-family:serif; font-size:12pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<span style="font-family:'DejaVu Sans', sans-serif; font-size:10.5pt">Maecenas tincidunt est efficitur
ligula euismod, sit amet ornare est vulputate.</span></li>
</ul>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<img src="image.001.png" width="431" height="217" alt=""
style="-aw-left-pos:92.5pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:8.5pt; -aw-wrap-type:square; float:left" />
</p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif">In non mauris justo. Duis vehicula mi vel mi pretium, a
viverra erat efficitur. Cras aliquam est ac eros varius, id iaculis dui auctor. Duis pretium neque
ligula, et pulvinar mi placerat et. Nulla nec nunc sit amet nunc posuere vestibulum. Ut id neque eget
tortor mattis tristique. Donec ante est, blandit sit amet tristique vel, lacinia pulvinar arcu.
Pellentesque scelerisque fermentum erat, id posuere justo pulvinar ut. Cras id eros sed enim aliquam
lobortis. Sed lobortis nisl ut eros efficitur tincidunt. Cras justo mi, porttitor quis mattis vel,
ultricies ut purus. Ut facilisis et lacus eu cursus.</span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif">In eleifend velit vitae libero sollicitudin euismod.
Fusce vitae vestibulum velit. Pellentesque vulputate lectus quis pellentesque commodo. Aliquam erat
volutpat. Vestibulum in egestas velit. Pellentesque fermentum nisl vitae fringilla venenatis. Etiam id
mauris vitae orci maximus ultricies. </span></p>
<p style="margin-top:11.25pt; margin-bottom:23.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
</div>
</body>
</html>
我找到了答案，你应该在 css 中使用 !important :)
我使用包 Epubjs-rn 在我的代码中显示 Epub 书，我想在我的代码中覆盖书的主题，但是一些 HTML 标签不这样做得到样式，我看到 HTML 我的书的来源，我发现如果某些参数定义在样式中没有覆盖，例如在 body 标签背景中没有改变，或者在 li 标签颜色中没有改变，因为那是在 [=25= 中设置的]
任何人都可以帮助我如何更改 Epubjs-rn
中此 HTML 文件的背景我在 React-native 中的代码：
themes={{
"custom_theme": {
"p": {
"background-color": "purple",
"font-size": "15px"
},
"h1": {
"color": "red",
},
"li": {
"background-color": "yellow",
"color":"red",
},
"body": {
"background": "#ffff00",
}
}
}}
theme="custom_theme"
Epub HTML :
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="Aspose.Words for .NET 16.3.0.0" />
<title></title>
<!--[if gte mso 9]><xml><o:DocumentProperties><o:Revision>0</o:Revision><o:TotalTime>0</o:TotalTime><o:Created>2017-08-02T09:09:18Z</o:Created><o:Pages>0</o:Pages><o:Words>0</o:Words><o:Characters>0</o:Characters><o:Lines>0</o:Lines><o:Paragraphs>0</o:Paragraphs><o:CharactersWithSpaces>0</o:CharactersWithSpaces><o:Version>0.0000</o:Version></o:DocumentProperties></xml><![endif]-->
</head>
<body style="background:#ffffff">
<div>
<h1 id="navPoint_1"
style="margin-top:23.25pt; margin-bottom:6pt; text-indent:18pt; page-break-after:avoid; widows:0; orphans:0; font-size:18pt">
<span style="font-family:'Liberation Sans', sans-serif">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nunc ac faucibus odio. </span></h1>
<p style="margin-top:6pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt"><span
style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif">Vestibulum neque massa, scelerisque sit amet ligula eu,
congue molestie mi. Praesent ut varius sem. Nullam at porttitor arcu, nec lacinia nisi. Ut ac dolor
vitae odio interdum condimentum. </span><span
style="font-family:'DejaVu Sans', sans-serif; font-weight:bold">Vivamus dapibus sodales ex, vitae
malesuada ipsum cursus convallis. Maecenas sed egestas nulla, ac condimentum orci. </span><span
style="font-family:'DejaVu Sans', sans-serif">Mauris diam felis, vulputate ac suscipit et, iaculis non
est. Curabitur semper arcu ac ligula semper, nec luctus nisl blandit. Integer lacinia ante ac libero
lobortis imperdiet. </span><span style="font-family:'DejaVu Sans', sans-serif; font-style:italic">Nullam
mollis convallis ipsum, ac accumsan nunc vehicula vitae. </span><span
style="font-family:'DejaVu Sans', sans-serif">Nulla eget justo in felis tristique fringilla. Morbi sit
amet tortor quis risus auctor condimentum. Morbi in ullamcorper elit. Nulla iaculis tellus sit amet
mauris tempus fringilla.</span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif">Maecenas mauris lectus, lobortis et purus mattis,
blandit dictum tellus.</span></p>
<ul style="margin:0pt; padding-left:0pt">
<li
style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<span style="font-family:'DejaVu Sans', sans-serif; font-weight:bold">Maecenas non lorem quis tellus
placerat varius. </span></li>
<li
style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<span style="font-family:'DejaVu Sans', sans-serif; font-style:italic">Nulla facilisi. </span></li>
<li
style="margin-top:11.25pt; margin-left:28.52pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:7.48pt; font-family:serif; font-size:12pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<span style="font-family:'DejaVu Sans', sans-serif; font-size:10.5pt; text-decoration:underline">Aenean
congue fringilla justo ut aliquam. </span></li>
<li
style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<a href="https://products.office.com/en-us/word" style="text-decoration:none"><span
style="font-family:'DejaVu Sans', sans-serif; text-decoration:underline; color:#000000">Mauris
id ex erat. </span></a><span style="font-family:'DejaVu Sans', sans-serif">Nunc vulputate neque
vitae justo facilisis, non condimentum ante sagittis. </span></li>
<li
style="margin-top:11.25pt; margin-left:27.83pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:8.17pt; font-family:serif; font-size:10.5pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<span style="font-family:'DejaVu Sans', sans-serif">Morbi viverra semper lorem nec molestie. </span>
</li>
<li
style="margin-top:11.25pt; margin-left:28.52pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; padding-left:7.48pt; font-family:serif; font-size:12pt; -aw-font-family:'Symbol'; -aw-font-weight:normal; -aw-number-format:''">
<span style="font-family:'DejaVu Sans', sans-serif; font-size:10.5pt">Maecenas tincidunt est efficitur
ligula euismod, sit amet ornare est vulputate.</span></li>
</ul>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<img src="image.001.png" width="431" height="217" alt=""
style="-aw-left-pos:92.5pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:8.5pt; -aw-wrap-type:square; float:left" />
</p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif">In non mauris justo. Duis vehicula mi vel mi pretium, a
viverra erat efficitur. Cras aliquam est ac eros varius, id iaculis dui auctor. Duis pretium neque
ligula, et pulvinar mi placerat et. Nulla nec nunc sit amet nunc posuere vestibulum. Ut id neque eget
tortor mattis tristique. Donec ante est, blandit sit amet tristique vel, lacinia pulvinar arcu.
Pellentesque scelerisque fermentum erat, id posuere justo pulvinar ut. Cras id eros sed enim aliquam
lobortis. Sed lobortis nisl ut eros efficitur tincidunt. Cras justo mi, porttitor quis mattis vel,
ultricies ut purus. Ut facilisis et lacus eu cursus.</span></p>
<p style="margin-top:11.25pt; margin-bottom:11.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif">In eleifend velit vitae libero sollicitudin euismod.
Fusce vitae vestibulum velit. Pellentesque vulputate lectus quis pellentesque commodo. Aliquam erat
volutpat. Vestibulum in egestas velit. Pellentesque fermentum nisl vitae fringilla venenatis. Etiam id
mauris vitae orci maximus ultricies. </span></p>
<p style="margin-top:11.25pt; margin-bottom:23.25pt; text-align:justify; line-height:120%; font-size:10.5pt">
<span style="font-family:'DejaVu Sans', sans-serif"> </span></p>
</div>
</body>
</html>
我找到了答案，你应该在 css 中使用 !important :)