title: How do I override default PrimeFaces CSS with custom styles?
body: <p>I want to change the size of a PrimeFaces component. For example, a <a href="https://www.primefaces.org/showcase/ui/data/orderList.xhtml" rel="nofollow noreferrer"><code>&lt;p:orderList&gt;</code></a>. It has a class called <code>ui-orderlist-list</code> which is defined in <code>primefaces.css</code> with a fixed 200x200 dimension. No matter what I do in my <code>theme.css</code>, it is overwritten by this attribute and there is no way I can make the content part of a <code>&lt;p:orderList&gt;</code> wider.</p>
  <p>For other components I might want to override just one instance of a component, not all.</p>
  <p>Can anyone please tell me how can I do all this?</p>