blocks|key|3161379|text|我认为如果将calendarClassName应用于嵌套元素，这种方法可以解决您的问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3161380|​|3161381|const+StyledDatePicker+=+styled(DatePicker)`
++.calendarClassName+{
++++border-radius:+0px;
++++box-shadow:+2px+0px+2.5px+#D6D6D6;
++++border:+1px+solid+${color.pacific};
++}
`;

<StyledDatePicker+calendarClassName="calendarClassName">|code-block|syntax|javascript|3161382|3161383|entityMap^0|6|H|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|T|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|O|$]]

<p>I think this approach could resolve your problem if <code>calendarClassName</code> is applied for a nested element.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const StyledDatePicker = styled(DatePicker)`
  .calendarClassName {
    border-radius: 0px;
    box-shadow: 2px 0px 2.5px #D6D6D6;
    border: 1px solid ${color.pacific};
  }
`;

&lt;StyledDatePicker calendarClassName="calendarClassName"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2201419|text|您可以使用以下代码片段注入CSS类。在下面的代码片段中，在class-1中，colour属性将被重写。如果class-1已经是正在应用的现有类，那么这将起作用，否则您将不得不将className='+class+-1‘传递给DatePicker。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2201420|import+styled,+{+css+}+from+'styled-components';
export+const+StyledDatePicker+=+styled(DatePicker)`
.class-1+{
+color:+black;
}
`;|code-block|syntax|javascript|2201421|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can inject CSS classes using the following code snippet. In below snippet, in class-1 the colour property would be overridden. This would work if class-1 is already existing class being applied or else you will have to pass className='class-1' to DatePicker.</p>

<pre><code>import styled, { css } from 'styled-components';
export const StyledDatePicker = styled(DatePicker)`
.class-1 {
 color: black;
}
`;
</code></pre>


blocks|key|288328|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|288329|​|288330|const+Wrapper+=+styled.div`
++&+.calendarClassName{
++++//+your+style+goes+here
++}
`;

<Wrapper>
+++<DatePicker+/>
</Wrapper>|code-block|syntax|javascript|288331|288332|或|288333|288334|const+DtPicker+=+styled(DatePicker)`
++&+.calendarClassName{
++++//+your+style+goes+here
++}
`;

<DtPicker+/>|288335|288336|288337|必须在‘&’和之间使用‘空格’|blockquote|offset|length|style|BOLD|288338|288339|entityMap^0|0|0|0|0|0|0|0|0|0|3|3|7|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|O|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|19|8|@$T|1A|U|1B|V|W]|$T|1C|U|1D|V|W]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|Z|$]]

<p>try this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const Wrapper = styled.div`
  &amp; .calendarClassName{
    // your style goes here
  }
`;

&lt;Wrapper&gt;
   &lt;DatePicker /&gt;
&lt;/Wrapper&gt;</code></pre>
</div>
</div>
</p>

<p>or </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const DtPicker = styled(DatePicker)`
  &amp; .calendarClassName{
    // your style goes here
  }
`;

&lt;DtPicker /&gt;</code></pre>
</div>
</div>
</p>

<blockquote>
  <p>Must use <strong>'space'</strong> between <strong>'&amp;'</strong> and <strong>'.calendarClassName'</strong></p>
</blockquote>


blocks|key|288349|text|如果DatePicker接收到额外的className，然后将其附加到自身的类列表中，那么它会使用样式的对其进行包装，以对其应用额外的样式。我知道你已经尝试了所有可能的方法，但都不管用。这可能表明第三方库不处理额外的className，因此您不可能将SC与库结合在一起。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|288350|entityMap^0|1D|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>If the DatePicker receives additional className then appends it to the class list of itself, then it does work to wrapper it using <strong>styled</strong> to apply extra styles to it. I see you've tried all the possible methods but none of them work. It probably indicates that third party lib doesn't handle the additional className so that it's impossible for you to combine SC with the lib together.</p>


blocks|key|3161549|text|在没有附加到组件的情况下，styled-components不提供生成类名的方法。但是，我们可以利用此功能来实现您想要的功能。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3161550|简单className重命名|3161551|如果您需要使用由styled-components生成的类名，并且我们知道它将被附加到className属性，那么您可以根据需要创建一个中间组件来操作它。|3161552|const+ClassNameToCalendarClassName+=+({+className,+...rest+})+=>+(
++<Calendar+calendarClassName={className}+{...rest}+/>
);

const+SConvertClassNameToCalendarClassName+=+styled(ClassNameToCalendarClassName)`
++color:+blue;
`;|code-block|syntax|javascript|3161553|多个className重命名|3161554|对于在代码中给定点需要多个className的情况，您将需要与所需的类一样多的中间组件：|3161555|const+ClassNameToC3+=+({+c1,+c2,+className,+...rest+})+=>+(
++//+if+you+pass+{...rest},+c1+and+c2+are+redundant,+but+included+for+clarity
++<Calendar+c1={c1}+c2={c2}+c3={className}+{...rest}+/>
);

const+ClassNameToC2+=+({+className,+...rest+})+=>+(
++<ClassNameToC3+c2={className}+{...rest}+/>
);

const+ClassNameToC1+=+({+className,+...rest+})+=>+(
++<ClassNameToC2+c1={className}+{...rest}+/>
);|3161556|和匹配的样式组件，|3161557|//+Styled+components
const+SClassNameToC3+=+styled(ClassNameToC3)`...`;
const+SClassNameToC2+=+styled(ClassNameToC2)`...`;
const+SClassNameToC1+=+styled(ClassNameToC1)`...`;|3161558|entityMap^0|D|H|0|2|9|0|17|9|0|0|2|9|0|D|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|19|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|S|3|T|5|L|7|1G|8|@]|D|@]|E|$M|N]]|$1|U|3|V|5|6|7|1H|8|@]|D|@]|E|$]]|$1|W|3|X|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|Y|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|Z|$]]

<p><code>styled-components</code> does not provide a way to generate class names without them being attached to a component. However, we can use this feature to our advantage to achieve what you're looking for.</p>

<h1>Simple <code>className</code> rename</h1>

<p>If you need to use a class name generated by styled-components, given that we know that it will be attached to the <code>className</code> prop, you can create an intermediate component to manipulate it as needed.</p>

<pre><code>const ClassNameToCalendarClassName = ({ className, ...rest }) =&gt; (
  &lt;Calendar calendarClassName={className} {...rest} /&gt;
);

const SConvertClassNameToCalendarClassName = styled(ClassNameToCalendarClassName)`
  color: blue;
`;
</code></pre>

<h1>Multiple <code>className</code> renames</h1>

<p>For cases where you need multiple <code>className</code>s at a given point in the code, you'll need as many intermediate components as classes you need:</p>

<pre><code>const ClassNameToC3 = ({ c1, c2, className, ...rest }) =&gt; (
  // if you pass {...rest}, c1 and c2 are redundant, but included for clarity
  &lt;Calendar c1={c1} c2={c2} c3={className} {...rest} /&gt;
);

const ClassNameToC2 = ({ className, ...rest }) =&gt; (
  &lt;ClassNameToC3 c2={className} {...rest} /&gt;
);

const ClassNameToC1 = ({ className, ...rest }) =&gt; (
  &lt;ClassNameToC2 c1={className} {...rest} /&gt;
);
</code></pre>

<p>and the matching styled components,</p>

<pre><code>// Styled components
const SClassNameToC3 = styled(ClassNameToC3)`...`;
const SClassNameToC2 = styled(ClassNameToC2)`...`;
const SClassNameToC1 = styled(ClassNameToC1)`...`;
</code></pre>


<p>I have a 3rd party lib which needs a <code>calendarClassName</code> to modify its style which expect a traditional class name of a CSS class. Can I use styled components to accomplish this?</p>

<p>I tried <code>css</code> function, but it won't work, the result is the array of style rather than a CSS class entity.</p>

<p>Just want to do something like this:</p>

<pre><code>const myStyle = css`color: black`;

&lt;DatePicker calendarClassName={myStyle}&gt; // won't work
</code></pre>

<p>Tried <code>attrs</code> without any luck, the className has not been passed down to DatePicker.</p>

<pre><code>const calendarClassName = "calendar";
export const MyDatePicker = styled(DatePicker).attrs({
  calendarClassName,
})`
  .${calendarClassName} {
    border-radius: 0px;
    box-shadow: 2px 0px 2.5px #D6D6D6;
    border: 1px solid ${color.pacific};
  }
`;
</code></pre>

<p>I know I can use CSS directly, but I just want to know how to use <code>styled-components</code> to do the job.</p>

<p>Thanks :)</p>


Use styled-components to supply a css class

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个第三方库，这需要一个calendarClassName来修改它的风格，期望一个传统的类名的CSS类。我可以使用带样式的组件来完成此任务吗？我尝试了css函数，但它不起作用，结果是样式数组而不是CSS类实体。我只想这样做：const myStyle = css`color: black`;<DatePicker ...

问使用styled component来提供css类
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用styled component来提供css类EN