AMP: How to change the background color of the amp-accordion header?

Question

I am trying to change the background color of the title in amp-accordion. The only way I was able to do this was to apply a style to .-amp-accordion-header, which is invalid.

Answer 1

The AMP validator throws an error if you try to override the classes .-amp-xxxxxas suggested in another answer.

I fixed this problem by creating my own class:

.myheader {
    background-color:yellow; 
}

and I added this class to the header:

<amp-accordion>
    <section expanded>
        <h2 class="myheader">Section 1</h2>
        <p>Bunch of awesome content</p>
    </section>
    ...

Answer 2

You are right by changing it to .-amp-accordion-header. You may have missed something with your code. Here is an example from GitHub :

/* heading element*/
.-amp-accordion-header {
    cursor: pointer;
    background-color: #efefef;
    padding-right: 20px;
    border: solid 1px #dfdfdf;
}