Slot style does not work in vue

problem description

1.

the environmental background of the problems and what methods you have tried

**:
**

related codes

/ / Please paste the code text below (do not replace the code with pictures)
subcomponent code
< template >

<transition name="slider">
    <div class="about" ref="subtips">
        <m-header :canreturn=true :titleText="titleText" :type=8 :backType=2 @back="hide"></m-header>
        <div class="infobox">
            <slot>
            </slot>
        </div>
    </div>
</transition>

< / template >

< style scoped lang= "stylus" rel= "stylesheet/stylus" >

.about {

position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: -sharpffffff;
z-index: 5;

.infobox {
    padding: 0 15px;

    .title {
        color: red;
    }
}

}
< / style >

parent component code
< tips >

      <div class="title"></div>

< / tips >

what result do you expect? What is the error message actually seen?

inserts a title class= "title" in the slot;
also defines the css style of title in the subcomponent, but the style does not take effect

May.11,2021

The things in

slot belong to the parent component. Of course, you have to write the style
in the parent component. Either you write some inherited styles in infobox
or your component is split incorrectly. How do you know that someone using tip will definitely pass in an element with class as title?
if you require that you must pass an element of class= "title", why don't you write class= "title" in the subcomponent

<div class="title"><slot/></div>
<tips></tips>

sorry, encounters stylus preprocessor for the first time.
first check whether the corresponding loader is installed


F12 open and navigate to the element to see if the style is applied to the element, and whether it is overwritten by other styles

.
Menu