清晰度向导-将CSS选择器添加到自定义向​​导按钮

Question

我有一个带有以下自定义向导按钮的向导：

<clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button> 
<clr-wizard-button [type]="'previous'">Previous</clr-wizard-button>
<clr-wizard-button [type]="'next'">Next</clr-wizard-button>
<clr-wizard-button [type]="'custom-save'">Save</clr-wizard-button>

现在，我想用自定义颜色设置custom-save类型的按钮的样式，为此，我需要应用一个CSS选择器。 attr.class无法正常工作。

实现此目标的最佳方法是什么？

编辑： 自定义保存按钮的格式化html输出：

<clr-wizard-button class="clr-wizard-btn-wrapper" _nghost-c5="" ng-reflect-type="custom-save" ng-reflect-disabled="false" aria-hidden="false">
  <button _ngcontent-c5="" class="btn clr-wizard-btn" type="button">
  Speichern
  </button>
</clr-wizard-button>

Answer 1

只需在您的ClrWizardButton上放置一个自定义类，它将为您呈现。

<clr-wizard-button [type]="'custom'" class="my-custom-button">Cancel</clr-wizard-button> 

这将呈现出来，如您所见，您可以在CSS中使用.my-custom-button button来定位按钮。

<clr-wizard-button class="my-custom-button clr-wizard-btn-wrapper ng-star-inserted" _nghost-c1="" ng-reflect-type="custom-previous" aria-hidden="false">
  <button _ngcontent-c1="" class="btn clr-wizard-btn btn-outline clr-wizard-btn--secondary" type="button">Custom</button>
</clr-wizard-button>

Answer 2

假设这会渲染带有type的标准button[type="custom-save"] { background: lightgreen; }，那么属性选择器将起作用。

<button type="custom-save">Save</button>

@Configuration
@EnableOAuth2Client
@RequiredArgsConstructor
public class OAuthSecurityConfiguration extends WebSecurityConfigurerAdapter {
    private static final String LOGIN_PATH = "/oauth/login";

    private static final int OAUTH2_CLIENT_FILTER_ORDER = -100;

    static {
        SecurityContextHolder.setStrategyName(SecurityContextHolder.MODE_INHERITABLETHREADLOCAL);
    }

    private final OAuth2ClientContext oauth2ClientContext;

    private final OAuth2ClientContextFilter oAuth2ClientContextFilter;


    @Override
    protected void configure(HttpSecurity http) throws Exception {
        final OAuth2ClientAuthenticationProcessingFilter ssoFilter = new OAuth2ClientAuthenticationProcessingFilter(LOGIN_PATH);
        ssoFilter.setRestTemplate(googleRestTemplate());
        ssoFilter.setTokenServices(tokenServices());
        ssoFilter.setAuthenticationManager(oAuth2AuthenticationManager());

        final OAuth2AuthenticationProcessingFilter clientFilter = new OAuth2AuthenticationProcessingFilter();
        clientFilter.setAuthenticationManager(oAuth2AuthenticationManager());
        clientFilter.setStateless(false);

//      @formatter:off
        http
            .csrf().disable()
            .cors().disable()
            .headers()
            .frameOptions().sameOrigin()
            .cacheControl().disable()
            .and()
            .antMatcher("/**")
                .csrf().disable()
                .httpBasic().disable()
                .rememberMe().disable()
                .addFilterBefore(ssoFilter, BasicAuthenticationFilter.class)
                .addFilterBefore(clientFilter, OAuth2ClientAuthenticationProcessingFilter.class)
                .authorizeRequests()
            .antMatchers("/api/**").fullyAuthenticated()
            .anyRequest().permitAll()
            .and()
            .logout().logoutUrl("/logout")
            .and() .exceptionHandling().authenticationEntryPoint(authenticationEntryPoint());
//      @formatter:on
    }