Question

我正在制作一个网页，其中react-ace编辑器占据了页面宽度的50％和页面高度的90％。编辑器在编写一些代码后使用垂直滚动条之后，我要设置显示的默认垂直滚动条的样式。

我可以使用-

获取编辑器的实例

const reactAceComponent = this.refs.reactAceComponent;
const editor = reactAceComponent.editor;

通过将reactAceComponent引用放在编辑器上。

然后，我可以更改Scroller的高度和宽度等。但是如何设置Scroller本身的样式？

假设我想给滚动器一个类“ style-scroller”，并执行以下操作：

#style-scroller::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-scroller::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

#style-scroller::-webkit-scrollbar-thumb
{
    background-color: #3366FF;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(0deg,
                                              rgba(255, 255, 255, 0.5) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, 0.5) 50%,
                                              rgba(255, 255, 255, 0.5) 75%,
                                              transparent 75%,
                                              transparent)
}

是否可以为滚动条提供自定义样式？我什至从哪里开始？请帮助我。

Answer 1

您可以使用public class CustomEntityConfiguration : IEntityTypeConfiguration<CustomEntity> { public void Configure(EntityTypeBuilder<CustomEntity> builder) { // ID builder.HasKey(e => e.Id); builder.Property(e => e.Titulo).IsRequired().HasMaxLength(255); builder.Property(e => e.Dth).IsRequired(); builder.Property(e => e.Resumo).HasMaxLength(2000); builder.Property(e => e.Pago); builder.Property(e => e.Publico); builder.Property(e => e.LinkFacebook).HasMaxLength(255); builder.Property(e => e.LinkWebsite).HasMaxLength(255); builder.Property(e => e.LinkYouTube).HasMaxLength(255); } }类将ace中的滚动条作为目标，而.ace_scrollbar，.ace_scrollbar-v仅将垂直或水平滚动条作为目标（但是.ace_scrollbar-h伪类也适用于此））。

cloud9 https://github.com/c9/core/blob/c4d1c59dc8d6619bdca3dbe740291cd5cd26352c/plugins/c9.ide.ace/scrollbar.js#L22中使用的一种更简单的替代方法是单独使用:horizontal来定位所有滚动条

有没有办法改变react-ace编辑器默认Scroller的样式？

1 个答案: